PostCSS plugin that enables @if statements in your CSS.
npm install postcss-conditionalsvar fs = require('fs');
var postcss = require('postcss');
var conditionals = require('postcss-conditionals');
var css = fs.readFileSync('input.css', 'utf8');
var output = postcss()
.use(conditionals)
.process(css)
.css;Using this input.css:
.foo {
@if 3 < 5 {
background: green;
}
@else {
background: blue;
}
}you will get:
.foo {
background: green;
}Also works well with postcss-simple-vars:
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}and with postcss-for:
@for $i from 1 to 3 {
.b-$i {
width: $i px;
@if $i == 2 {
color: green;
}
}
}- Clone repository
- Install dependencies
npm install - If
parser.jisonfile has been changed, regenerateparser.jsby runningnpm run gen-parser