postcss-scss

What is postcss-scss?

The postcss-scss npm package is a syntax parser that allows PostCSS to process SCSS syntax. It enables users to work with SCSS-like syntax in PostCSS, which is a tool for transforming styles with JavaScript. This package does not compile SCSS into CSS but instead allows you to manipulate SCSS sources within PostCSS plugins.

What are postcss-scss's main functionalities?

Parsing SCSS Syntax

This feature allows developers to parse SCSS syntax using PostCSS. The code sample demonstrates how to set up PostCSS to process a string of SCSS code using the postcss-scss syntax parser.

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

postcss(plugins)
  .process(scssCode, { syntax: syntax })
  .then(result => {
    console.log(result.css);
  });

Linting SCSS

This feature enables the use of stylelint for linting SCSS files by specifying the postcss-scss parser as the syntax. The code sample shows how to configure stylelint to lint SCSS files using the postcss-scss syntax.

const stylelint = require('stylelint');
const scssSyntax = require('postcss-scss');

stylelint.lint({
  files: 'src/**/*.scss',
  syntax: scssSyntax
}).then(function (result) {
  console.log(result.output);
});

Other packages similar to postcss-scss

sass

Sass is a mature, stable, and powerful professional grade CSS extension language. It is completely compatible with all versions of CSS and provides a more comprehensive feature set for creating complex stylesheets. Unlike postcss-scss, Sass compiles SCSS or Sass syntax directly into CSS.

node-sass

node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass. It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware. Compared to postcss-scss, node-sass not only parses but also compiles SCSS into CSS.

less

Less is a backward-compatible language extension for CSS. This is another pre-processor that can offer similar functionalities in terms of variables, mixins, and nesting. Unlike postcss-scss, Less focuses on extending CSS with dynamic behavior and compiles into CSS.

README

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.

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.

var syntax = require('postcss-scss');
postcss(plugins).process(scss, { parser: syntax }).then(function (result) {
    result.css // CSS with normal comments
});

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