rework-variant

Another take on variables in Rework.

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