# PostCSS SCSS Syntax [![Build Status][ci-img]][ci] 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. [PostCSS]: https://github.com/postcss/postcss [ci-img]: https://img.shields.io/travis/postcss/postcss-scss.svg [SCSS]: http://sass-lang.com/ [ci]: https://travis-ci.org/postcss/postcss-scss Sponsored by Evil Martians ## Install ```sh npm --save install postcss-scss ``` or (if you use [Yarn](https://yarnpkg.com/)) ```sh yarn add --dev postcss-scss ``` ## Usage There are two ways to use this parser: ### 1. SCSS Transformations The main use case of this plugin is to apply PostCSS transformations directly to SCSS source code. For example, you can lint SCSS source with [Stylelint] and linter will automatically fix issues in the source. ```js // postcss.config.js module.exports = { syntax: 'postcss-scss', plugins: { … } } ``` [Stylelint]: http://stylelint.io/ ### 2. Inline Comments for PostCSS Also you can use this parser just to add `//` single-line comment to your PostCSS project (without any Sass): ```scss :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. ```js // 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. [postcss-strip-inline-comments]: https://github.com/mummybot/postcss-strip-inline-comments