Modify alpha opacity of LESS variable

Question

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?

ScottS · Accepted Answer · 2014-02-28T14:09:14.170

328

The site documentation gives the answer:

background: fade(@blue, 20%);

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

edited Feb 28 '14 at 14:09

answered Oct 07 '12 at 19:33

ScottS

Thanks! I've been getting tired of converting everything to RGBA! – BillyNair Jun 19 '13 at 01:47
I was looking for the darken and lighten .. Docs got me there. Thanks – Apr 08 '14 at 13:05
2

I agree 'fade' doesn't seem accurate to me. Sass does it right: alpha(), opacity(), and rgba(). – Rich Finelli May 26 '16 at 12:27
3

For the record, `fade()` doesn't work with CSS vars -- i.e. `fade(var(--mycolor), 20%)` – ed1nh0 Jan 17 '19 at 12:10

score 36 · Answer 2 · edited Jun 20 '20 at 09:12

36

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

edited Jun 20 '20 at 09:12

Community

answered Jun 14 '15 at 11:43

Adrian Enriquez

1

Fadeout is exactly what I was looking for, thank you ! – maxime1992 Aug 03 '16 at 11:32