eanakashima / chromatic-sass

Advanced color manipulation for node sass

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.