less Color Operation Functions Set a darker or lighter shade of the background color for another property

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

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



Got any less Question?