Use Sass as a PostCSS plugin
Switch branches/tags
Nothing to show
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib 3.0.0 Oct 4, 2018
test 2.0.0 Dec 25, 2017
.appveyor.yml 3.0.0 Oct 4, 2018
.editorconfig 3.0.0 Oct 4, 2018
.gitignore 3.0.0 Oct 4, 2018
.rollup.js 3.0.0 Oct 4, 2018
.tape.js 1.0.0 Dec 6, 2017
.travis.yml 3.0.0 Oct 4, 2018 3.0.0 Oct 4, 2018 2.0.0 Dec 25, 2017 1.0.0 Dec 6, 2017 Added details on using with postcss-scss syntax Oct 16, 2018
index.js 3.0.0 Oct 4, 2018
package.json 3.0.0 Oct 4, 2018

PostCSS Sass PostCSS Logo

NPM Version Linux Build Status Windows Build Status Gitter Chat

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.


Add PostCSS Sass to your build tool:

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


Use PostCSS Sass to process your CSS:



Add PostCSS to your build tool:

npm install postcss --save-dev

Use PostCSS Sass as a plugin:

  require('@csstools/postcss-sass')(/* node-sass options */)

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');

  postcssSass(/* pluginOptions */)
]).process(YOUR_CSS, {
  syntax: 'postcss-scss'


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(
      require('@csstools/postcss-sass')(/* node-sass options */)


Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PostCSS Sass in your Gruntfile:


  postcss: {
    options: {
      use: [
        require('@csstools/postcss-sass')(/* node-sass options */)
    dist: {
      src: '*.css'


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.