Book Image

Learning less.js

Book Image

Learning less.js

Overview of this book

Table of Contents (22 chapters)
Learning Less.js
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Operating on colors


The following is a list of the operation functions that can be applied to the Less code:

Function

Purpose of the function

Example value

saturate

Increases the saturation of a color in the HSL color space by an absolute amount.

saturate(hsl(0, 59.4%, 40.6%), 20%);

desaturate

Decreases the saturation of a color in the HSL color space by an absolute amount.

desaturate(hsl(0, 59.4%, 40.6%), 20%);

lighten

Increases the lightness of a color in the HSL color space by an absolute amount.

lighten(hsl(0, 59.4%, 40.6%), 20%);

darken

Decreases the lightness of a color in the HSL color space by an absolute amount.

darken(hsl(0, 59.4%, 40.6%), 20%);

fadein

Decreases the transparency (or increases the opacity) of a color, making it more opaque.

fadein(hsl(0, 59.4%, 40.6%), 20%);

fadeout

Increases the transparency (or decreases the opacity) of a color, making it less opaque.

fadeout(hsl(0, 59.4%, 40.6%), 20%);

fade

Sets the absolute transparency of a color. It can be applied to colors irrespective of whether they already have an opacity value or not.

fade(hsl(0, 59.4%, 40.6%), 20%);

Tip

For more information, read the documentation on the main Less site at http://lesscss.org/functions/#color-operations. I've also created a CodePen that shows these effects in action—this is available at http://codepen.io/alibby251/pen/KGltj.