LESS CSS preprocessor: Is there a way to map a single color to an rgb and rgba definition?

Question

I'm trying to write a block in the CSS preprocessor LESS that will do the following:

@transparent_background(@color; @alpha: .8)
{
  background: @color;
  background: rgba(<color R value>, <color G value>, <color B value>, @alpha);
}

Is there any way to get the RGB values out of @color if it's a standard hex definition (i.e. #rrggbb)? Is there a way to do this if @color is defined some other way?

EDIT: SOLUTION

@transparent_background(@color; @alpha: .8)
{
  background: @color;
  background: @color + rgba(0, 0, 0, @alpha);
}

score 3 · Answer 1 · answered Dec 15 '10 at 01:43

3

Try this:

background: @color - rgba(0, 0, 0, 1.0) + rgba(0, 0, 0, @alpha);

The subtraction will clear the alpha channel on @color then you just add the desired @alpha to the alpha channel. Colors have the full suite of operators and they work component by component when operating on two colors; colors are stored as RGBA components internally so this should work. Also, the alpha channel is normalized to be in the interval [0, 1.0] so subtracting 1.0 from the alpha channel should clear it without causing any problems.

I don't have CSS LESS set up right now so I can't check but this is worth a shot.

answered Dec 15 '10 at 01:43

mu is too short

426,620
70
833
800

Since @color is just a hex definition, there's no need to subtract the alpha channel first. So the solution was simply: @color + rgba(0, 0, 0, @alpha). Seems obvious in retrospect but I didn't realize you could mix hex/rgba like that. – Jeremy Kauffman Dec 15 '10 at 15:40
I was just being a bit paranoid and trying to future-proof the alpha channel modification, hence the subtraction to force the alpha channel into a known state so that adding `@alpha` to it would result in the alpha channel being equal to `@alpha`. As an added bonus it makes it clearer that you're assigning the alpha channel rather than just adjusting it a bit. – mu is too short Dec 15 '10 at 17:57
In lessphp at least, there's no check to prevent the alpha channel from going negative. – Jeremy Kauffman Dec 20 '10 at 17:12
1

Really? I'd fix it and submit a patch if I was using lessphp. A negative alpha doesn't make much sense (maybe "press really really really hard with the black crayon"?) and the canonical Ruby implementation limits the alpha to `[0,1]`. OTOH, this demonstrates the problem of working without a formal specification. – mu is too short Dec 20 '10 at 18:25

score 2 · Answer 2 · answered Jun 20 '12 at 21:42

2

I know this is an old question, but if all you are looking to do is add an alpha value just use fade(@color, @alpha). Color can be in hex, rgba or hsla.

answered Jun 20 '12 at 21:42

mdf

186
4

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

None of the solutions work anymore, but this one does (thanks to @Elyse):

.alpha(@color, @alpha: 0.8) {
    color: @color;
    color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}

The hsla() function, while not advertised in the LESS website, is defined in the source code.

edited May 23 '17 at 12:27

Community

1
1

answered Jan 01 '12 at 19:04

Alix Axel

151,645
95
393
500

score 2 · Answer 4 · answered Jan 06 '12 at 11:20

2

Note that you can also proceed with the fadein/fadeout functions of LESS :

.alpha(@color, @alpha: 80)
{
    background-color: fadeout(@color, (100 - @alpha));
}

Thus, .alpha(red, 25) will result in a background-color of rgba(255, 0, 0, 0.25)

answered Jan 06 '12 at 11:20

Maxime Fabre

2,252
3
20
24

+1, Nice one! PS: I absolutely love the new LESS guarded mixins. :D – Alix Axel Jan 09 '12 at 21:53

LESS CSS preprocessor: Is there a way to map a single color to an rgb and rgba definition?

4 Answers4