postcss-mixins

    9.0.1 • 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 on GitHub.

    Install

    npm i postcss-mixins

    DownloadsWeekly Downloads

    225,864

    Version

    9.0.1

    License

    MIT

    Unpacked Size

    9.16 kB

    Total Files

    4

    Last publish

    Collaborators

    • ai