https://github.com/postcss/postcss-scss

SCSS parser for PostCSS.
https://github.com/postcss/postcss-scss

Last synced: about 1 month ago
JSON representation

SCSS parser for PostCSS.

• Host: GitHub
• URL: https://github.com/postcss/postcss-scss
• Owner: postcss
• License: mit
• Created: 2015-08-09T13:12:10.000Z (over 9 years ago)
• Default Branch: main
• Last Pushed: 2023-09-28T22:18:02.000Z (about 1 year ago)
• Last Synced: 2024-04-14T02:32:51.378Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.17 MB
• Stars: 643
• Watchers: 17
• Forks: 39
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS SCSS Syntax



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

[SCSS]:    http://sass-lang.com/



  



## Install

```sh

npm --save install postcss 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

## Security Contact

To report a security vulnerability, please use the [Tidelift security contact].

Tidelift will coordinate the fix and disclosure.

[Tidelift security contact]: https://tidelift.com/security