# postcss-scss

**Repository Path**: mirrors_jquense/postcss-scss

## Basic Information

- **Project Name**: postcss-scss
- **Description**: SCSS parser for PostCSS.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-18
- **Last Updated**: 2026-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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