postcss-mixins

What is postcss-mixins?

The postcss-mixins package allows you to define and use mixins in your CSS, which can help you avoid code repetition and make your stylesheets more maintainable. Mixins are reusable chunks of code that you can include in other rulesets.

What are postcss-mixins's main functionalities?

Defining and Using Mixins

You can define a mixin using the @mixin directive and then include it in other rulesets using the @include directive. This helps in reusing common styles across different selectors.

/* Define a mixin */
@mixin border-radius($radius) {
  border-radius: $radius;
}

/* Use the mixin */
.button {
  @include border-radius(5px);
}

Parameterizing Mixins

Mixins can accept parameters, allowing you to customize the output of the mixin for different use cases. This makes your mixins more flexible and powerful.

/* Define a mixin with parameters */
@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

/* Use the mixin with different parameters */
.card {
  @include box-shadow(2px, 2px, 5px, rgba(0, 0, 0, 0.3));
}

.modal {
  @include box-shadow(0, 4px, 10px, rgba(0, 0, 0, 0.5));
}

Conditional Logic in Mixins

You can include conditional logic within your mixins to handle different scenarios. This example shows how to create a responsive mixin that adjusts a property based on a breakpoint.

/* Define a mixin with conditional logic */
@mixin responsive($property, $value, $breakpoint) {
  #{$property}: $value;
  @media (min-width: $breakpoint) {
    #{$property}: calc($value * 1.5);
  }
}

/* Use the mixin */
.container {
  @include responsive(width, 100px, 768px);
}

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.

README

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.

Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-mixins

Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to [official docs] and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-mixins'),
    require('autoprefixer')
  ]
}

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(/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({ selector: '.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 an object if you don’t want to create each node manually:

require('postcss-mixins')({
    mixins: {
        image: function (mixin, path, dpi) {
            return {
                '&': {
                    background: 'url(' + path + ')'
                },
                ['@media (min-resolution: '+ dpi +'dpi)']: {
                    '&': {
                        background: 'url(' + path + '@2x)'
                    }
                }
            }
        }
    }
});

Mixin body will be in mixin.nodes:

var postcss = require('postcss');

require('postcss-mixins')({
    mixins: {
        hover: function (mixin) {
            let rule = postcss.rule({ selector: '&:hover, &.hover' });
            rule.append(mixin.nodes);
            mixin.replaceWith(rule);
        }
    }
});

Or you can use object instead of function:

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

Mixin Content

@mixin-context at-rule will be replaced with mixin @mixin children. For exampel, CSS mixins:

@define-mixin isIE {
    .isIE & {
        @mixin-content;
    }
}

or JS mixins:

require('postcss-mixins')({
    mixins: {
        isIe: function () {
            '@mixin-content': {},
        }
    }
});

could be used like this:

.foo {
    color: blue;

    @mixin isIE {
        color: red;
    }
}

// output
.foo { color: blue; }
.isIE .foo { color: red; }

Migration from Sass

If you need to use Sass and PostCSS mixins together (for example, while migration), you could use @add-mixin, instead of @mixin. Just put PostCSS after Sass.

// Legacy SCSS
@mixin old {
    …
}
@include old;

// New code
@define-mixin new {
    …
}
@add-mixin new;

Options

Call plugin function to set options:

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

mixins

Type: Object

Object of function mixins.

mixinsDir

Type: string|string[]

Autoload all mixins from one or more 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'
    }
}

// mixins/size.pcss

@define-mixin size $size {
    width: $size;
    height: $size;
}

// mixins/circle.sss

@define-mixin circle $size
  border-radius: 50%
  width: $size
  height: $size

mixinsFiles

Type: string|string[]

Similar to mixinsDir; except, you can provide fast-glob syntax to target or not target specific files.

require('postcss-mixins')({
    mixinsFiles: path.join(__dirname, 'mixins', '!(*.spec.js)')
})

silent

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