el-beeswarm
Version:
<div style="display: flex; padding: 1rem; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; display: flex;
90 lines (63 loc) • 2.06 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
```
There are two ways to use this parser:
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: {
…
}
}
```
[]: http://stylelint.io/
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
[] plugin.
[]: https://github.com/mummybot/postcss-strip-inline-comments