PostCSS Variants
PostCSS plugin for generating variants of functional CSS. Variant types are pluggable with included plugins to generate responsive
and hover
variants.
Here's an example using the built-in hover variant.
@variants hover {
.black { color: black; }
}
.black { color: black; }
.hover-black:hover { color: black; }
Here's an example using the built-in responsive variant.
@variants responsive {
.black { color: black; }
}
.black { color: black; }
@media (--breakpoint-sm) {
.black-sm { color: black; }
}
@media (--breakpoint-md) {
.black-md { color: black; }
}
@media (--breakpoint-lg) {
.black-lg { color: black; }
}
@media (--breakpoint-xl) {
.black-xl { color: black; }
}
They can be combined to generate both.
@variants hover, responsive {
.black { color: black; }
}
.black { color: black; }
.hover-black:hover { color: black; }
@media (--breakpoint-sm) {
.black-sm { color: black; }
}
@media (--breakpoint-md) {
.black-md { color: black; }
}
@media (--breakpoint-lg) {
.black-lg { color: black; }
}
@media (--breakpoint-xl) {
.black-xl { color: black; }
}
They can also be nested to apply them combinatorially.
@variants responsive {
@variants hover {
.black { color: black; }
}
}
.black { color: black; }
.hover-black:hover { color: black; }
@media (--breakpoint-sm) {
.black-sm { color: black; }
.hover-black-sm:hover { color: black; }
}
@media (--breakpoint-md) {
.black-md { color: black; }
.hover-black-md:hover { color: black; }
}
@media (--breakpoint-lg) {
.black-lg { color: black; }
.hover-black-lg:hover { color: black; }
}
@media (--breakpoint-xl) {
.black-xl { color: black; }
.hover-black-xl:hover { color: black; }
}
Usage
Install package:
npm install --save-dev postcss-variants
Use postcss-variants as a plugin to PostCSS:
postcss([
require('postcss-variants')()
]).process(YOUR_CSS)
Customize transform function
Use the transform param to customize the selector structure
postcss([
require('postcss-variants')({
transform: (selector, suffix) => `${suffix}-${selector}`
})
]).process(YOUR_CSS)