less Color Operation Functions Set a darker or lighter shade of the background color for another property
Example
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 cannot read the value assigned to one property and use it for another and so a separate variable should be defined. This variable will be directly assigned to the background color whereas for the border color, the darken function is used to get a darker shade.
Lighten
#demo {
@refcolor: #f0b9b8;
background: @refcolor;
box-shadow: 2px 2px 0px lighten(@refcolor, 5%);
}
The above code makes use of the lighten() function to set the shadow color as a shade that is 5% lighter than the reference color (which is also the background color).
