lml-main
Version:
This is now a mono repository published into many standalone packages.
96 lines (66 loc) • 2.41 kB
Markdown
<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.
[]: https://github.com/postcss/postcss
[]: https://img.shields.io/travis/postcss/postcss-scss.svg
[]: http://sass-lang.com/
[]: 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>
```sh
npm --save install postcss-scss
```
or (if you use [Yarn](https://yarnpkg.com/))
```sh
yarn add --dev postcss-scss
```
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
[] to add the appropriate vendor prefixes to it; or you need to
lint SCSS with a plugin such as [Stylelint].
```js
var syntax = require('postcss-scss');
postcss(plugins).process(scss, { syntax: syntax }).then(function (result) {
result.content // SCSS with transformations
});
```
[]: https://github.com/postcss/autoprefixer
[]: http://stylelint.io/
This module also enables parsing of single-line comments in CSS source code.
```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
[] plugin.
[]: https://github.com/mummybot/postcss-strip-inline-comments
We parse SCSS files the same way as we do vanilla CSS, except we provide
`postcss-scss` as the parser option.
```js
var syntax = require('postcss-scss');
var root = postcss.parse(scss, { parser: syntax });
```