postcss-sassy-mixins

2.1.0 • Public • Published

PostCSS Sassy Mixins Build Status

PostCSS plugin for sass-like mixins.

Installation

npm install postcss-sassy-mixins

Usage

var postcss = require('postcss');
var mixins = require('postcss-sassy-mixins');
 
var options = {
   // options here
};
 
var output = postcss()
  .use(mixins(options))
  .process(css)
  .css;
@mixin border-radius($radius{
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
 
.box { @include border-radius(10px); }

Turns into:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Options

mixins

Type: Object

Object of mixins. The mixin can either be a function or an object.

require('postcss-mixins')({
    mixins: {
        clearfix: {
            '&::after': {
                content: '""',
                display: 'table',
                clear: 'both'
            }
        },
        color: function (rule, color) {
            rule.replaceWith({ prop: 'color', value: color });
        }
    }
})

mixinsDir

Type: string|string[]

Autoload all mixins from one or more directories. The name of the mixin 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'
    }
}

mixinsFiles

Type: string|string[]

Similar to mixinsDir, except you provide glob syntax to target or not target specific files.

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

silent

Type: boolean

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

Package Sidebar

Install

npm i postcss-sassy-mixins

Weekly Downloads

5,354

Version

2.1.0

License

MIT

Last publish

Collaborators

  • andyjansson