90 lines
2 KiB
Markdown
90 lines
2 KiB
Markdown
|
# PostCSS SCSS Syntax [![Build Status][ci-img]][ci]
|
|||
|
|
|
|||
|
|
<img align="right" width="95" height="95"
|
|||
|
|
title="Philosopher’s stone, logo of PostCSS"
|
|||
|
|
src="http://postcss.github.io/postcss/logo.svg">
|
|||
|
|
|
|||
|
|
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 href="https://evilmartians.com/?utm_source=postcss">
|
|||
|
|
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg" alt="Sponsored by Evil Martians" width="236" height="54">
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 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
|