Tutorial by Examples

#demo-element { background: @theme-color; color: contrast(@theme-color, black, white, 50%); } @theme-color: red; The above example will set the text color of the element as white if the background-color is dark and vice-versa. This is achieved using the contrast() color operation functi...
Darken #demo { @refcolor: #f0b9b8; background: @refcolor; border: 1px solid darken(@refcolor, 25%); } The above code makes use of the darken() function to set the border color as a shade that is 25% darker than the reference color (which is also the background color). Less compiler ca...
It is possible to change the opacity of a color with fade() function. fade() takes 2 parameters: a color opacity (in %) Example: @elegant: #eeffgg; .light-elegant { background-color: fade(@elegant, 20%); } <div class="light-elegant"> I have a 20% elegant...

Page 1 of 1