https://github.com/bugsnag/chromatic-sass

Advanced color manipulation for node sass
https://github.com/bugsnag/chromatic-sass

gradients lab product sass

Last synced: 3 months ago
JSON representation

Advanced color manipulation for node sass

• Host: GitHub
• URL: https://github.com/bugsnag/chromatic-sass
• Owner: bugsnag
• License: mit
• Created: 2016-04-07T00:13:02.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-01-20T15:23:47.000Z (almost 5 years ago)
• Last Synced: 2024-07-10T16:34:59.259Z (4 months ago)
• Topics: gradients, lab, product, sass
• Language: CoffeeScript
• Homepage:
• Size: 73.2 KB
• Stars: 147
• Watchers: 29
• Forks: 9
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Chromatic

Advanced color manipulation for node-sass. **[Read the API docs ›](api.md)**

## Quick start

Chromatic is a [node-sass](https://github.com/sass/node-sass) wrapper around [chroma.js](https://github.com/gka/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](#link-to-blog-post)

- 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.

```shell

npm install chromatic-sass

```

### Usage

To use Chromatic, provide it in your node-sass configuration.

```javascript

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](https://github.com/sass/node-sass#functions--v300---experimental) 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.

```javascript

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:

```Sass

.element {

  background-image: chromatic-gradient(to right, blue, red);

}

```

### Build

To compile the coffee-script source, `npm install`, then:

```shell

npm run build

```

### Author

Chromatic is written by Max Luster

### License

Released under MIT license.