postcss-utilities is a PostCSS plugin that have the most used mixins, shortcuts and helpers to use as
@util rules in yours stylesheets.
Playground
Getting started
1. Install PostCSS and the plugin via npm:
npm install postcss postcss-utilities
2. Choose your runner
You can use a PostCSS runner or use directly PostCSS API. Choose your favorite runner:
3. Read the docs and start to use @util
Examples:
.cfx {
@util clearfix;
}
.rounded-top {
@util border-top-radius(4px);
}
@util no-hover {
.box {
background-color: #666;
}
}.cfx:after {
content: '';
display: block;
clear: both;
}
.rounded-top {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.no-hover .box {
background-color: #666;
}