README
postcss-generate-preset
PostCSS plugin that allows quick generation of rules. Useful for quickly creating repetitive utilities.
Installation
$ npm install postcss-generate-preset
Usage
input.css
@generate-preset .u-mp margin padding 0 10px;
@generate-preset .u-mt margin-top 10px 20px;
output.css
.u-mp0 {
margin: 0;
padding: 0;
}
.u-mp10 {
margin: 10px;
padding: 10px;
}
.u-mt10 {
margin-top: 10px;
}
.u-mt20 {
margin-top: 20px;
}
var presets = require('postcss-generate-preset');
postcss([ presets() ])
Options
(default: useImportantfalse
)
When set to true
all declarations will use !important
. Often useful when utility classes need to override component styles
(default): zeroValuefalse
)
The default is to add zero to a selector. In some cases it might be desirable to display it differently
presets({ zeroValue: 'Z' });
@generate-preset .u-m margin 0;
/* becomes */
.u-mZ {
margin: 0;
}
See PostCSS docs for examples for your environment.