Nomnom Pumpernickle Muffins
    Wondering what’s next for npm?Check out our public roadmap! »

    @csstools/postcss-sass

    4.0.0 • Public • Published

    PostCSS Sass PostCSS Logo

    NPM Version Linux Build Status Windows Build Status Support Chat

    PostCSS Sass lets you use Sass as a PostCSS plugin.

    $font-stack:    Helveticasans-serif;
    $primary-color: #333;
     
    :root {
      color: $primary-color;
      font: 100% $font-stack;
    }
     
    /* becomes */
     
    :root {
      color: #333;
      font: 100% Helveticasans-serif;
    }

    PostCSS Sass uses dart-sass, letting you safely run transforms before and after Sass, watching for changes to Sass imports, and preserving source maps.

    Usage

    Add PostCSS Sass to your build tool:

    npm install @csstools/postcss-sass --save-dev

    Node

    Use PostCSS Sass to process your CSS:

    require('@csstools/postcss-sass').process(YOUR_CSS);

    PostCSS

    Add PostCSS to your build tool:

    npm install postcss --save-dev

    Use PostCSS Sass as a plugin:

    postcss([
      require('@csstools/postcss-sass')(/* node-sass options */)
    ]).process(YOUR_CSS);

    The standard CSS parser included with PostCSS may not be able to parse SCSS specific features like inline comments. To accurately parse SCSS, use the SCSS Parser.

    npm install postcss-scss --save-dev
    const postcss = require('postcss');
    const postcssSass = require('@csstools/postcss-sass');
     
    postcss([
      postcssSass(/* pluginOptions */)
    ]).process(YOUR_CSS, {
      syntax: 'postcss-scss'
    });

    Gulp

    Add Gulp PostCSS to your build tool:

    npm install gulp-postcss --save-dev

    Use PostCSS Sass in your Gulpfile:

    var postcss = require('gulp-postcss');
     
    gulp.task('css', function () {
      return gulp.src('./src/*.css').pipe(
        postcss([
          require('@csstools/postcss-sass')(/* node-sass options */)
        ])
      ).pipe(
        gulp.dest('.')
      );
    });

    Grunt

    Add Grunt PostCSS to your build tool:

    npm install grunt-postcss --save-dev

    Use PostCSS Sass in your Gruntfile:

    grunt.loadNpmTasks('grunt-postcss');
     
    grunt.initConfig({
      postcss: {
        options: {
          use: [
            require('@csstools/postcss-sass')(/* node-sass options */)
          ]
        },
        dist: {
          src: '*.css'
        }
      }
    });

    Options

    PostCSS Sass options are directly forwarded to dart-sass options.

    Install

    npm i @csstools/postcss-sass

    DownloadsWeekly Downloads

    12,231

    Version

    4.0.0

    License

    CC0-1.0

    Unpacked Size

    22.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar