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