Another take on variables in Rework.
JavaScript CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
Makefile
README.md
index.js
package.json

README.md

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