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).