Chromatic
Advanced color manipulation for node-sass. Read the API docs ›
Quick start
Chromatic is a node-sass wrapper around chroma.js with a few Sass-specific additions.
Here are a few things Chromatic can do for you:
- Create perceptually uniform gradients using the conventional CSS3 linear-gradient syntax
- Procedurally generate aesthetically pleasing color scales
- Define colors in a wide range of color spaces
- Analyze and manipulate colors
Because of it's ability to support the LAB color space, Chromatic's color manipulation abilities can act as drop-in improvements for Sass's native color manipulation functions such as darken
, saturate
, and mix
.
Install
Install chromatic via NPM.
npm install chromatic-sass
Usage
To use Chromatic, provide it in your node-sass configuration.
var sass = require "node-sass"
var chromatic = require "chromatic-sass"
sass.render({
file: scss_filename,
functions: chromatic
}, function(err, result) { /*...*/ });
Chromatic returns an object defining custom functions that can be used with any node-sass build system. To provide your own custom javascript Sass functions alongside chromatic, merge chromatic
with your custom functions object before providing it in your node-sass configuration.
var _ = require "lodash";
var myFunction = {
'echoString($str)': function(str) {
return new sass.types.String(str);
}
};
var sassFunctions = _.merge(chromatic, myFunction);
/*...*/
Utilize Chromatic functions in your stylesheets as you would any other Sass function:
.element {
background-image: chromatic-gradient(to right, blue, red);
}
Build
To compile the coffee-script source, npm install
, then:
npm run build
Author
Chromatic is written by Max Luster
License
Released under MIT license.