A new take on variables for Rework.
Install with npm:
npm install rework-variant
var rework = require('rework');
var variant = require('rework-variant');
rework(txt).use(variant());
The $globals
rule allows variables to be referenced without a prefix:
$globals {
blue: #2ccdec;
orange: #f33c27;
}
a {
color: $blue;
}
a:hover {
color: $orange;
}
While other variable rules act as namespaces:
$colors {
blue: #2ccdec;
orange: #f33c27;
}
a {
color: $colors.blue;
}
a:hover {
color: $colors.orange;
}
Variables may be referenced in most places you'd expect:
$globals {
phone-portrait: (min-device-width: 320px);
phone-landscape: (min-device-width: 480px);
}
@media screen and $phone-portrait and $phone-landscape {
body {
some: 'stuff';
}
}
MIT