Trying LESS for a few days. Came with a problem with HSL – Hue-Saturation-Lightness, or may be it's a problem of my understanding, I'm afraid.
I tried the following HTML:
<div class="box hue">1</div> <div class="box saturation">2</div> <div class="box lightness">3</div>
And tried the LESS accordingly:
@color2: #167e8a;
.hue{
background-color: hue(@color2);
}
.saturation{
background-color: saturation(@color2);
}
.lightness{
background-color: lightness(@color2);
}
.box{
width: 50px;
height: 20px;
}
But the first three classes showing empty, doesn't showing anything – no background color. But the box is taking width & height.
What Photoshop did for me:
I checked the color code in Photoshop with changes in HSL, they all showing different colors in different combination. Then why my LESS is deceiving me?
Best Answer
HSL LESS functions don't return a color, rather an integer value for the color part that the name indicates.
From the documentation:
Examples
Before going further, it's worth mentioning that the spin() function will modify hue without requiring that you break down the color parts. Specifically, it will "rotate the hue angle of a color in either direction."
Even if you wish to break down HSL manually, it is straightforward.
More importantly, you can take the extracted channels, modify them, and subsequently rebuild the color: