color-claim-sass

color-claim-sass is a Sass color library, with a set of accompanying functions, classes and mixins. They are based on Tobias van Schneider's Color Claim. See all the color swatches over at http://www.vanschneider.com/colors/

Installation

NPM

npm install --save color-claim-sass installs color-claim-sass. Copy the scss or css files to your assets. Alternatively, use @import "path/to/node_modules/color-claim-sass/color-claim"; in your Sass project.

CDN

Download the latest version through via RawGit.

Import all CSS classes in your website using <link rel="stylesheet" href="https://cdn.rawgit.com/jeroenptrs/color-claim-sass/1d7af7f2/css/color-claim.min.css">

Usage

Function

color-claim($color, $claim[, $percentage])

$color selects the corresponding Color Claim swatch and accepts a number from 1 to 102. $claim accepts "bg", "text" or "mix" as value. This respectfully returns the background and text Color Claim colors that are stored in $color-claim, or mixes them together.

If you mix the colors together, you can add an extra parameter $percentage to set the weight of the mix. This percentage is 50% by default, i.e. "bg" and "text" have equal weight in the mix. Setting percentage to 0% equals to color-claim($color), 100% equals to color-claim($color, "text").

You should use this if you want to set something else than background-color or color. In case of setting background-color and/or color to their respective Color Claim values, use the mixin instead.

Mixin

@include color-claim($color[, $claim])

This mixin sets your element's background and/or text colors to the corresponding Color Claim values. $color selects the corresponding Color Claim swatch.

Not passing a value for $claim automatically sets both, passing "bg" or "text" as value respectfully only sets background-color and color.

Passing "inv" as a value sets the inverse: background-color to the corresponding "text" color and color to the "bg" color.

Classes

.color-claim-#{$color}
.color-claim-bg-#{$color}
.color-claim-text-#{$color}
.color-claim-inv-#{$color}

You can use the following classes if you really need to use it as a class (f.e. in HTML, jQuery, ...). In any other cases - like the ones addressed above - just use the mixin or the function.

$color can be any Color Claim swatch (1-102). Use .color-claim-#{$color} to set both the background-color and color attributes.

.color-claim-bg-#{$color} only sets background-color attribute, .color-claim-text-#{$color} only sets color.

If you want to set the inverse: .color-claim-inv-#{$color} sets background-color attribute to the color value (and vice versa).

Silent Classes

$_silent: true

You can also set all classes as silent, so they won't compile to your css. Before importing color-claim-sass in your project, create a variable $_silent and set it to true.

All classes will still be available in Sass, just use @extend %color-claim[-bg/-text/-inv]-#{$color}.