# postcss-sassy-mixins

> PostCSS plugin for sass-like mixins

Latest version **2.1.0** (published 2017-05-30) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2017-05-30 |
| First published | 2015-07-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 37 |
| Author | Andy Jansson |
| Maintainers | andyjansson |
| Keywords | postcss, css, postcss-plugin, mixins, sass |

## Links

- npm: https://www.npmjs.com/package/postcss-sassy-mixins
- Repository: https://github.com/andyjansson/postcss-sassy-mixins
- Homepage: https://github.com/andyjansson/postcss-sassy-mixins#readme
- Issues: https://github.com/andyjansson/postcss-sassy-mixins/issues
- npm.io page: https://npm.io/package/postcss-sassy-mixins

## Dependencies (3)

- [glob](https://npm.io/package/glob.md) ^6.0.4
- [postcss](https://npm.io/package/postcss.md) ^5.0.14
- [postcss-simple-vars](https://npm.io/package/postcss-simple-vars.md) ^1.2.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

- 2.1.0 (latest) — 2017-05-30
- 3.0.0-beta.0 (next) — 2017-08-13
- 2.0.0 — 2016-01-12
- 1.0.0 — 2015-07-28

## README

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

[PostCSS] plugin for sass-like mixins.

[PostCSS]:                 https://github.com/postcss/postcss
[postcss-mixins]:          https://github.com/postcss/postcss-mixins
[ci-img]:                  https://travis-ci.org/andyjansson/postcss-sassy-mixins.svg
[ci]:                      https://travis-ci.org/andyjansson/postcss-sassy-mixins

## Installation

```js
npm install postcss-sassy-mixins
```

## Usage

```js
var postcss = require('postcss');
var mixins = require('postcss-sassy-mixins');

var options = {
   // options here
};

var output = postcss()
  .use(mixins(options))
  .process(css)
  .css;
```

```css
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }
```

Turns into:

```css
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}
```

## Options

### `mixins`

Type: `Object`

Object of mixins. The mixin can either be a function or an object.

```js
require('postcss-mixins')({
    mixins: {
        clearfix: {
            '&::after': {
                content: '""',
                display: 'table',
                clear: 'both'
            }
        },
        color: function (rule, color) {
            rule.replaceWith({ prop: 'color', value: color });
        }
    }
})
```

### `mixinsDir`

Type: `string|string[]`

Autoload all mixins from one or more directories. The name of the mixin will be taken from file name.

```js
// gulpfile.js

require('postcss-mixins')({
    mixinsDir: path.join(__dirname, 'mixins')
})

// mixins/clearfix.js

module.exports = {
    '&::after': {
        content: '""',
        display: 'table',
        clear: 'both'
    }
}
```

### `mixinsFiles`

Type: `string|string[]`

Similar to [`mixinsDir`](#mixinsdir), except you provide
[glob](https://github.com/isaacs/node-glob) syntax to target or not target
specific files.

```js
require('postcss-mixins')({
    mixinsFiles: path.join(__dirname, 'mixins', '!(*.spec.js)')
})
```

### `silent`

Type: `boolean`

Remove unknown mixins and do not throw a error. Default is `false`.

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