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.

Docs

Read full docs on GitHub.