PostCSS SCSS Syntax

A SCSS parser for PostCSS.

This module does not compile SCSS. It simply parses mixins as custom at-rules & variables as properties, so that PostCSS plugins can then transform SCSS source code alongside CSS.

Install

npm --save install postcss-scss

or (if you use Yarn)

yarn add --dev postcss-scss

Usage

SCSS Transformations

The main use case of this plugin is to apply PostCSS transformations directly to SCSS source code. For example, if you ship a theme written in SCSS and need Autoprefixer to add the appropriate vendor prefixes to it; or you need to lint SCSS with a plugin such as Stylelint.

var syntax = require('postcss-scss');
postcss(plugins).process(scss, { syntax: syntax }).then(function (result) {
    result.content // SCSS with transformations
});

Inline Comments for PostCSS

This module also enables parsing of single-line comments in CSS source code.

:root {
    // Main theme color
    --color: red;
}

Note that you don’t need a special stringifier to handle the output; the default one will automatically convert single line comments into block comments.

// postcss.config.js
module.exports = {
  parser: 'postcss-scss',
  plugins: {
    …
  }
}

If you want Sass behaviour with removing inline comments, you can use postcss-strip-inline-comments plugin.

Parsing

We parse SCSS files the same way as we do vanilla CSS, except we provide postcss-scss as the parser option.

var syntax = require('postcss-scss');

var root = postcss.parse(scss, { parser: syntax });