PostCSS Color Scale
Plugin for generating color scales.
Install
npm install postcss-color-scale
Use
From the command line:
post-css --use postcss-color-scale styles.css -o styles.out.css
This can be used with postcss-cli in a npm run script. Great example post
Standard use case
Input
Output
Advanced use case
You can define any name for your color as long as you prefix the custom property with --cs-
it will be available as the second argument to the cs()
function.
Input
Output
How it works
The way the scale works is you supply a color and a variance ( meaning the difference between steps ) then use the cs()
function in your stylesheet to get a step of color from the scale.
Positive numbers go up the scale giving you a lighter color while negative numbers go down the scale giving you a darker color; where zero is the base color.
cs(0)
will give you the base color. cs(1)
will give you a lighter color and cs(-1)
will give you a darker color.