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; }
}Install package:
npm install --save-dev postcss-variantsUse postcss-variants as a plugin to PostCSS:
postcss([
require('postcss-variants')()
]).process(YOUR_CSS)Use the transform param to customize the selector structure
postcss([
require('postcss-variants')({
transform: (selector, suffix) => `${suffix}-${selector}`
})
]).process(YOUR_CSS)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent