shift73k/assets_old/node_modules/postcss-scss/README.md

89 lines
2 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# PostCSS SCSS Syntax [![Build Status][ci-img]][ci]
<img align="right" width="95" height="95"
title="Philosophers 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 dont 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