postcss-sass-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;
}

See also postcss-define-property for some simple cases.

Usage

postcss([ require('postcss-mixins') ])

See PostCSS docs for examples for your environment.

Mixins

CSS Mixin

Simple template defined directly in CSS to prevent repeating yourself.

See postcss-simple-vars docs for arguments syntax.

You can use it with postcss-nested plugin:

@define-mixin icon $name {
    padding-left: 16px;
    &::after {
        content: "";
        background-url: url(/icons/$(name).png);
    }
}

.search {
    @mixin icon search;
}

Unlike Sass, PostCSS has no if or while statements. If you need some complicated logic, you should use function mixin.

Function Mixin

This type of mixin gives you full power of JavaScript. You can define this mixins in mixins option.

This type is ideal for CSS hacks or business logic.

Also you should use function mixin if you need to change property names in mixin, because postcss-simple-vars doesn’t support variables in properties yet.

First argument will be @mixin node, that called this mixin. You can insert your declarations or rule before or after this node. Other arguments will be taken from at-rule parameters.

See PostCSS API about nodes API.

require('postcss-mixins')({
    mixins: {
        icons: function (mixin, dir) {
            fs.readdirSync('/images/' + dir).forEach(function (file) {
                var icon = file.replace(/\.svg$/, '');
                var rule = postcss.rule('.icon.icon-' + icon);
                rule.append({
                    prop:  'background',
                    value: 'url(' + dir + '/' + file ')'
                });
                mixin.replaceWith(rule);
            });
        }
    }
});

@mixin icons signin;

.icon.icon-back { background: url(signin/back.svg) }
.icon.icon-secret { background: url(signin/secret.svg) }

You can also return object if you doesn’t want to create each node manually:

require('postcss-mixins')({
    mixins: {
        hidpi: function (path) {
            return {
                '&': {
                    background: 'url(' + path + ')'
                },
                '@media (min-resolution: 120dpi)': {
                    '&': {
                        background: 'url(' + path + '@2x)'
                    }
                }
            }
        }
    }
}

Or you can use object instead of function:

require('postcss-mixins')({
    mixins: {
        clearfix: {
            '&::after': {
                content: '""',
                display: 'table',
                clear: 'both'
            }
        }
    }
}

Options

Call plugin function to set options:

postcss([ require('postcss-mixins')({ mixins: { … } }) ])

mixins

Object of function mixins.

mixinsDir

Autoload all mixins from this dirs. Mixin name will be taken from file name.

// gulpfile.js

require('postcss-mixins')({
    mixinsDir: path.join(__dirname, 'mixins/')
})

// mixins/clearfix.js

module.exports = {
    '&::after': {
        content: '""',
        display: 'table',
        clear: 'both'
    }
}

silent

Remove unknown mixins and do not throw a error. Default is false.