Modify alpha opacity of LESS variable

css variables less opacity alpha

82,718

Solution 1

The site documentation gives the answer:

background: fade(@blue, 20%);

The function name is fade not alpha according to that document.

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%);

82,718

Updated on May 03, 2020

ben about 4 years
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?
BillyNair about 11 years

Thanks! I've been getting tired of converting everything to RGBA!
Admin about 10 years

I was looking for the darken and lighten .. Docs got me there. Thanks
Rich Finelli about 8 years

I agree 'fade' doesn't seem accurate to me. Sass does it right: alpha(), opacity(), and rgba().
maxime1992 almost 8 years

Fadeout is exactly what I was looking for, thank you !
ed1nh0 over 5 years

For the record, fade() doesn't work with CSS vars -- i.e. fade(var(--mycolor), 20%)