# postcss-sassy

> PostCSS plugin sassy

Latest version **0.0.2** (published 2015-07-08) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install postcss-sassy
pnpm add postcss-sassy
yarn add postcss-sassy
bun add postcss-sassy
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2015-07-08 |
| First published | 2015-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1589 |
| Author | Jonathan Neal |
| Maintainers | jonathantneal |
| Keywords | postcss, css, postcss-plugin, sassy, variables, conditionals, ifs, thens, elses, fors, nesteds, nestings, eaches, mixins, imports |

## Links

- npm: https://www.npmjs.com/package/postcss-sassy
- Repository: https://github.com/jonathantneal/postcss-sassy
- Issues: https://github.com/jonathantneal/postcss-sassy/issues
- npm.io page: https://npm.io/package/postcss-sassy

## Dependencies (8)

- [postcss](https://npm.io/package/postcss.md) ^4.1.16
- [postcss-import](https://npm.io/package/postcss-import.md) ^6.1.1
- [postcss-mixins](https://npm.io/package/postcss-mixins.md) ^0.3.0
- [postcss-nested](https://npm.io/package/postcss-nested.md) ^0.3.2
- [postcss-simple-vars](https://npm.io/package/postcss-simple-vars.md) ^0.3.0
- [postcss-media-minmax](https://npm.io/package/postcss-media-minmax.md) ^1.2.0
- [postcss-color-function](https://npm.io/package/postcss-color-function.md) ^1.3.0
- [postcss-advanced-variables](https://npm.io/package/postcss-advanced-variables.md) 0.0.2

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

- 0.0.2 (latest) — 2015-07-08
- 0.0.1 — 2015-07-07

## README

# PostCSS Sassy [![Build Status][ci-img]][ci]

<img align="right" width="135" height="95" src="http://postcss.github.io/postcss/logo-leftp.png" title="Philosopher’s stone, logo of PostCSS">

[PostCSS Sassy] is a [PostCSS] plugin pack that allows you to use [Sass]-like markup in your CSS files.

The Sass syntax allows you to use variables, mixins, conditionals, and other goodies.

### Variables

```css
/* before */

$blue: #056ef0;
$column: 200px;

.menu {
	width: calc(4 * $column);
}

.menu_link {
	background: $blue;
	width: $column;
}

/* after */

.menu {
	width: calc(4 * 200px);
}

.menu_link {
	background: #056ef0;
	width: 200px;
}
```

### Conditionals

```css
/* before */

.foo {
	@if 3 < 5 {
		background: green;
	}
	@else {
		background: blue;
	}
}

/* after */

.foo {
	background: green;
}
```

```css
/* before */

@for $i from 1 to 3 {
	.b-$i { width: $(i)px; }
}

/* after */

.b-1 {
	width: 1px
}
.b-2 {
	width: 2px
}
.b-3 {
	width: 3px
}
```

```css
/* before */

@each $icon in (foo, bar, baz) {
	.icon-$(icon) {
		background: url('icons/$(icon).png');
	}
}

/* after */

.icon-foo {
	background: url('icons/foo.png');
}

.icon-bar {
	background: url('icons/bar.png');
}

.icon-baz {
	background: url('icons/baz.png');
}
```

### Mixins

```css
/* before */

@define-mixin icon $name {
	padding-left: 16px;

	&::after {
		content: "";
		background-url: url(/icons/$(name).png);
	}
}

.search {
	@mixin icon search;
}

/* after */

magic {}
```

### Imports

```css
/* Before */

@import "partials/_base.css"; /* Contents of _base: `body { background: black; }` */


/* After */

body { background: black; }
```

## Usage

You just need to follow these two steps to use [PostCSS Sassy]:

1. Add [PostCSS] to your build tool.
2. Add [PostCSS Sassy] as a PostCSS process.

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

### Node

```js
postcss([ require('postcss-sassy')({ /* options */ }) ])
```

### Grunt

Add [Grunt PostCSS] to your build tool:

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

Enable [PostCSS Sassy] within your Gruntfile:

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

grunt.initConfig({
	postcss: {
		options: {
			processors: [
				require('postcss-sassy')({ /* options */ })
			]
		},
		dist: {
			src: 'css/*.css'
		}
	}
});
```

## Differences between Sassy and Sass

...

### Options

...

[ci]: https://travis-ci.org/jonathantneal/postcss-sassy
[ci-img]: https://travis-ci.org/jonathantneal/postcss-sassy.svg
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
[PostCSS]: https://github.com/postcss/postcss
[PostCSS Sassy]: https://github.com/jonathantneal/postcss-sassy
[Sass]: http://sass-lang.com/

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