Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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);
}
like image 351
Jeremy Kauffman Avatar asked Dec 14 '10 23:12

Jeremy Kauffman


People also ask

What is the difference between RGB and RGBA in CSS?

An RGB color value represents RED, GREEN, and BLUE light sources. An RGBA color value is an extension of RGB with an Alpha channel (opacity).

What is less CSS framework?

Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles. Because Less looks just like CSS, learning it is a breeze.

Why would you add a Rgba after a RGB property?

By combining CSS Variables and rgba() , we can make our layouts and colors a bit more dynamic without re-defining a new color for each element.

How do I make Rgba transparent?

So how do you use RGBA? rgba (100%, 0%, 0%, 1); The fourth value denotes alpha and needs to be between 0.0 (absolute transparency) and 1.0 (absolute opacity). For example, 0.5 would be 50% opacity and 50% transparency.


2 Answers

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.

like image 101
mu is too short Avatar answered Sep 20 '22 05:09

mu is too short


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.

like image 35
Alix Axel Avatar answered Sep 20 '22 05:09

Alix Axel