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