postcss-mixins
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/postcss-mixins package

10.0.0 • Public • Published

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.

Sponsored by Evil Martians

Docs

Read full docs here.

Package Sidebar

Install

npm i postcss-mixins

Weekly Downloads

339,450

Version

10.0.0

License

MIT

Unpacked Size

11.1 kB

Total Files

4

Last publish

Collaborators

  • ai