PostCSS Sass

PostCSS Sass lets you use Sass as a PostCSS plugin.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

:root {
  color: $primary-color;
  font: 100% $font-stack;
}

/* becomes */

:root {
  color: #333;
  font: 100% Helvetica, sans-serif; }

PostCSS Sass uses node-sass to provide binding for Node.js to LibSass, the C version of Sass.

By using PostCSS Sass, you can safely run transforms before and after Sass, watch for changes to Sass imports, and preserve 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);

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 a limited subset of Node-sass options, which do not include file, outFile, data, importer, omitSourceMapUrl, sourceMap, and sourceMapContents, as these must be handled by PostCSS and PostCSS Sass.