Controlling colors with LESSjs color functions
Explain how to use color functions in LESS js
Less comes with handy color functions, that can easily be applied to colors in your CSS properties. This make your LESS files less bloated and easier to mantain.
anyway, less comes by following color manipulation functions by default:
saturate(); desaturate(); lighten(); darken(); fadein(); fadeout(); spin();
here, I define the following color as variables, which will be defined as
defining colors as variables is important, because:
- It will be more easier and fluid.
- It helps to memorize colors, as the hex-formatted defaults tend to be harder to memorize.
Saturate and Desaturate
Saturate and desaturate make a color more ‘colorful’ and ‘grayscale’. this works by add / substract the Saturate part of HSL.
saturate(@color, 30); desaturate(@color, 30%);
Lighten and Darken
These functions adjust the Light part of HSL, thus make the color lighter and darker, respectively.
lighten(@color, 30%); darken(@color, 30%);
Fadein and Fadeout
Modifies the transparency. FadeIn increase the transparency, while fadeout decrease the transparency.
fadein(@color, 30%); fadeout(@color, 30%);
Spin modifies the Hue part of HSL. the syntax is slightly different, which uses integers between 0 and 255 instead of percentages.
By using these set of color functions, we can chain the functions, and achieve more advanced pattern or colors, for example:
background: @color; border: 1px solid darken(@color, 15%); box-shadow: inset 0 1px 1px lighten(@color, 15%),inset 0 -1px 1px darken(saturate(@color, 50%), 10%),0 3px 6px fadeout(@color, 25%);
That way, you can only defineone colors, then let LESS to render the other colors. try to change
@colors to other colors!
Inspired by Controlling Color With SASS Color Functions by Thoughtbot.
Some explanations taken from Don’t Read this CSS Tutorial by Verekia.