postcss-mixins

PostCSS Mixins

PostCSS plugin for mixins.

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

@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);
}

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

Docs

Read full docs here.

Similar packages

Other packages similar to postcss-mixins

postcss-extend

The postcss-extend package allows you to extend existing rulesets with additional styles, similar to the @extend directive in Sass. Unlike postcss-mixins, which focuses on reusable chunks of code, postcss-extend is more about inheriting styles from other selectors.

postcss-nested

The postcss-nested package enables you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. While postcss-mixins focuses on reusable code blocks, postcss-nested helps in organizing your CSS in a more readable and maintainable way.

postcss-simple-vars

The postcss-simple-vars package allows you to use variables in your CSS, similar to Sass variables. While postcss-mixins provides reusable code blocks, postcss-simple-vars focuses on simplifying the management of CSS values through variables.