# postcss-mixins

> PostCSS plugin for mixins

Latest version **12.1.2** (published 2025-07-25) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; no vulnerabilities; high maintenance score.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 12.1.2 |
| Published | 2025-07-25 |
| First published | 2015-02-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | ^20.0 \|\| ^22.0 \|\| >=24.0 |
| Dependencies | 4 |
| Unpacked size | 11.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 486 |
| Author | Andrey Sitnik |
| Maintainers | ai |
| Keywords | postcss, css, postcss-plugin, mixins, sass |

## Links

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

## Dependencies (4)

- [sugarss](https://npm.io/package/sugarss.md) ^5.0.0
- [postcss-js](https://npm.io/package/postcss-js.md) ^4.0.1
- [tinyglobby](https://npm.io/package/tinyglobby.md) ^0.2.14
- [postcss-simple-vars](https://npm.io/package/postcss-simple-vars.md) ^7.0.1

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

- 12.1.2 (latest) — 2025-07-25
- 12.1.1 — 2025-07-25
- 12.1.0 — 2025-07-25
- 12.0.0 — 2025-06-28
- 11.0.3 — 2024-09-30
- 11.0.2 — 2024-09-26
- 11.0.1 — 2024-09-09
- 11.0.0 — 2024-09-08
- 10.0.1 — 2024-04-24
- 10.0.0 — 2024-03-04
- 9.0.4 — 2022-09-03
- 9.0.3 — 2022-06-20
- 9.0.2 — 2022-02-25
- 9.0.1 — 2021-12-05
- 9.0.0 — 2021-12-05
- … 38 more at https://npm.io/package/postcss-mixins/versions

## README

# PostCSS Mixins

<img align="right" width="135" height="95"
     title="Philosopher’s stone, logo of PostCSS"
     src="https://postcss.org/logo-leftp.svg">

[PostCSS] plugin for mixins.

Note, that you must set this plugin before [postcss-simple-vars]
and [postcss-nested].

```css
@define-mixin icon $network, $color: blue {
    .icon.is-$(network) {
        color: $color;
        @mixin-content;
    }
    .icon.is-$(network):hover {
        color: white;
        background: $color;
    }
}

@mixin icon twitter {
    background: url(twt.png);
}
@mixin icon youtube, red {
    background: url(youtube.png);
}
```

```css
.icon.is-twitter {
    color: blue;
    background: url(twt.png);
}
.icon.is-twitter:hover {
    color: white;
    background: blue;
}
.icon.is-youtube {
    color: red;
    background: url(youtube.png);
}
.icon.is-youtube:hover {
    color: white;
    background: red;
}
```

[postcss-utilities] collection is better for `clearfix` and other popular hacks.
For simple cases you can use [postcss-define-property].

[postcss-define-property]: https://github.com/daleeidd/postcss-define-property
[postcss-utilities]:       https://github.com/ismamz/postcss-utilities
[postcss-simple-vars]:     https://github.com/postcss/postcss-simple-vars
[postcss-nested]:          https://github.com/postcss/postcss-nested
[PostCSS]:                 https://github.com/postcss/postcss

<a href="https://evilmartians.com/?utm_source=postcss-mixins">
  <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
       alt="Sponsored by Evil Martians" width="236" height="54">
</a>


## Docs
Read full docs **[here](https://github.com/postcss/postcss-mixins#readme)**.

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