rework-variant

0.2.2 • Public • Published

Rework Variant

A new take on variables for Rework.

Installation

Install with npm:

npm install rework-variant

Usage

var rework = require('rework');
var variant = require('rework-variant');
rework(txt).use(variant());

Globals

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';
  }
}

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i rework-variant

Weekly Downloads

4

Version

0.2.2

License

MIT

Last publish

Collaborators

  • simme