Use Sass as a PostCSS plugin
Switch branches/tags
Nothing to show
Clone or download
Permalink
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
CHANGELOG.md 3.0.0 Oct 4, 2018
CONTRIBUTING.md 2.0.0 Dec 25, 2017
LICENSE.md 1.0.0 Dec 6, 2017
README.md 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

README.md

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.

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 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.