postcss-sassy-mixins
v2.1.0
Published
PostCSS plugin for sass-like mixins
Downloads
8,826
Maintainers
Readme
PostCSS Sassy Mixins
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
.