Scales of Color-Variables in Sass Maps
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
src
.gitignore
LICENSE
README.md
data.json
gruntfile.js
package-lock.json
package.json

README.md

ColrVars

Go see the demo.

Usage

To use these variables one needs to import the sass-maps color variables colrvars.scss into the main sass stylesheet

@import 'colrvars';

.test {
  background-color: color(blue-11);
}
.test p {
  color: color(gold-06);
}

Alternatively, convert the sass-map syntax to the dollar-sign syntax like:

@import 'colrvars';

$blue-11: color(blue-11);
$gold-06: color(gold-06);

.test {
  // background-color: color(blue-11);
  background-color: $blue-11;
}

.test p {
  // color: color(gold-06);
  color: $gold-06;
}

Adaptation

To make them your own, adapt these colorvalues, one will have to edit data.json. Get into Nunjucks templating (src/schemes) with this if it’s additional colors, and/or renaming of colors as well. Download or clone this repository, NPM install all the dependencies, edit the colorvalues in data.json, and run grunt from the commandline.

For renaming colors in Sass, consider using the color-naming convention as described in this blogpost: “More Gooder SASS Color Variables” with the help of this sass color “Variablizer” webapp.

This Readme in html.