Awesome
postcss-conditionals
PostCSS plugin that enables @if
statements in your CSS.
Installation
npm install postcss-conditionals
Usage
var 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;
}
}
}
Development
- Clone repository
- Install dependencies
npm install
- If
parser.jison
file has been changed, regenerateparser.js
by runningnpm run gen-parser