postcss-mixins

PostCSS plugin for mixins

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
postcss-mixins
458310.0.15 days ago9 years agoMinified + gzip package size for postcss-mixins in KB

Readme

PostCSS Mixins
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.
@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.
alt="Sponsored by Evil Martians" width="236" height="54">

Docs

Read full docs here.