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

Color blending


So far, we've seen how we can define a color space, extract one of its constituent elements out of it (such as hue or level of green) and that we can transform the color through fading or spinning the original. There's one more way we can change a color using Less—blending.

The principle works in the same way, in that we require two colors, but the effects are quite different. Let's have a quick look at the three functions you will likely use the most:

Function

Purpose of function

Example value

multiply

This function multiplies two colors.

multiply(#9ec1ef, #091d37);

screen

This does the opposite of multiply. The result is a brighter color.

screen (#9ec1ef, #091d37);

overlay

Conditionally make light channels lighter and dark channels darker.

overlay (#9ec1ef, #091d37);

Tip

For more information, refer to the full list of functions given in Appendix, Color Functions in Less, at the end of the book. I've also created a CodePen that shows these effects in...