# @csstools/postcss-sass

> Use Sass as a PostCSS plugin

Latest version **5.1.1** (published 2023-12-28) · CC0-1.0 license · 0 weekly downloads

## Install

```sh
npm install @csstools/postcss-sass
pnpm add @csstools/postcss-sass
yarn add @csstools/postcss-sass
bun add @csstools/postcss-sass
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 5.1.1 |
| Published | 2023-12-28 |
| First published | 2017-12-06 |
| Weekly downloads | 0 |
| License | CC0-1.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | ^12 \|\| ^14 \|\| >=16 |
| Dependencies | 3 |
| Unpacked size | 27.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 149 |
| Author | Jonathan Neal |
| Maintainers | romainmenke, alaguna, jonathantneal |
| Keywords | postcss, css, postcss-plugin, sass, node, lib, libsass, node-sass, preprocessor, scss, css, style, extension |

## Links

- npm: https://www.npmjs.com/package/@csstools/postcss-sass
- Repository: https://github.com/jonathantneal/postcss-sass
- Homepage: https://github.com/csstools/postcss-sass#readme
- Issues: https://github.com/csstools/postcss-sass/issues
- npm.io page: https://npm.io/package/@csstools/postcss-sass

## Dependencies (3)

- [sass](https://npm.io/package/sass.md) ^1.69.5
- [source-map](https://npm.io/package/source-map.md) ~0.7.4
- [@csstools/sass-import-resolve](https://npm.io/package/@csstools/sass-import-resolve.md) ^1.0.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 5.1.1 (latest) — 2023-12-28
- 5.1.0 — 2023-12-28
- 5.0.1 — 2022-03-08
- 5.0.0 — 2022-02-14
- 4.0.0 — 2019-01-23
- 3.0.0 — 2018-10-04
- 2.0.0 — 2017-12-25
- 1.0.0 — 2017-12-06
- 0.0.0 — 2017-12-06

## README

# PostCSS Sass [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]

[![NPM Version][npm-img]][npm-url]
[![test](https://github.com/csstools/postcss-sass/actions/workflows/test.yml/badge.svg)](https://github.com/csstools/postcss-sass/actions/workflows/test.yml)
[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]

[PostCSS Sass] lets you use [Sass] as a [PostCSS] plugin.

```scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

:root {
  color: $primary-color;
  font: 100% $font-stack;
}

/* becomes */

:root {
  color: #333;
  font: 100% Helvetica, sans-serif;
}
```

[PostCSS Sass] uses [dart-sass], letting you safely run transforms before and
after Sass, watching for changes to Sass imports, and preserving source maps.

## Usage

Add [PostCSS Sass] to your build tool:

```sh
npm install postcss @csstools/postcss-sass --save-dev
```

#### Node

Use [PostCSS Sass] to process your CSS:

```js
require('@csstools/postcss-sass').process(YOUR_CSS);
```

#### PostCSS

Use [PostCSS Sass] as a plugin:

```js
postcss([
  require('@csstools/postcss-sass')(/* dart-sass options */)
]).process(YOUR_CSS);
```

The standard CSS parser included with PostCSS may not be able to parse SCSS
specific features like inline comments. To accurately parse SCSS, use
the [SCSS Parser].

```bash
npm install postcss-scss --save-dev
```

```js
const postcss = require('postcss');
const postcssSass = require('@csstools/postcss-sass');

postcss([
  postcssSass(/* pluginOptions */)
]).process(YOUR_CSS, {
  syntax: require('postcss-scss')
});
```

#### Gulp

Add [Gulp PostCSS] to your build tool:

```sh
npm install gulp-postcss --save-dev
```

Use [PostCSS Sass] in your Gulpfile:

```js
var postcss = require('gulp-postcss');

gulp.task('css', function () {
  return gulp.src('./src/*.css').pipe(
    postcss([
      require('@csstools/postcss-sass')(/* dart-sass options */)
    ])
  ).pipe(
    gulp.dest('.')
  );
});
```

#### Grunt

Add [Grunt PostCSS] to your build tool:

```sh
npm install grunt-postcss --save-dev
```

Use [PostCSS Sass] in your Gruntfile:

```js
grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
        require('@csstools/postcss-sass')(/* dart-sass options */)
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});
```

## Options

[PostCSS Sass] options are directly forwarded to [dart-sass options].

[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-sass.svg
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/postcss/postcss
[npm-img]: https://img.shields.io/npm/v/@csstools/postcss-sass.svg
[npm-url]: https://www.npmjs.com/package/@csstools/postcss-sass

[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
[dart-sass]: https://github.com/sass/dart-sass
[dart-sass options]: https://github.com/sass/dart-sass#javascript-api
[PostCSS]: https://github.com/postcss/postcss
[PostCSS Sass]: https://github.com/csstools/postcss-sass
[Sass]: https://github.com/sass/dart-sass
[SCSS Parser]: https://github.com/postcss/postcss-scss
[discord]: https://discord.gg/bUadyRwkJS

---
_Source: https://npm.io/package/@csstools/postcss-sass · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._