Modify alpha opacity of LESS variable
Using LESS, I know that I can change the saturation or tint of a color variable. That looks like this:
background: lighten(@blue, 20%);
I want to change the alpha opacity of my color, though. Preferably like this:
background: alpha(@blue, 20%);
Is there a simple way to do this in LESS?
Solution 1:
The site documentation gives the answer:
background: fade(@blue, 20%);
The function name is fade
not alpha
according to that document.
Solution 2:
For completeness
fade
Set the absolute transparency of a color. Can be applied to colors whether they already have an opacity value or not.
background: fade(@blue, 20%);
fadein
Decrease the transparency (or increase the opacity) of a color, making it more opaque.
background: fadein(@blue, 80%);
fadeout
Increase the transparency (or decrease the opacity) of a color, making it less opaque. To fade in the other direction use fadein.
background: fadeout(@blue, 20%);
View Complete Documentation