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);
}
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).
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With