How do I convert a hexadecimal color to rgba with the Less compiler?

css less
chubbyk picture chubbyk · Feb 13, 2013 · Viewed 77.2k times · Source

I have the following code:

@color : #d14836;

.stripes span {
    -webkit-background-size: 30px 30px;
    -moz-background-size: 30px 30px;
    background-size: 30px 30px;
    background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
        color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
        to(transparent));

I need to convert @color to rgba(209, 72, 54, 1).

So I need to replace rgba(209, 72, 54, 1) in my code with a Less function that generates an rgba() value from my @color variable.

How can I do this with Less?

Answer

Ronald Pauffert picture Ronald Pauffert · Nov 25, 2013

Actually, the Less language comes with an embedded function called fade. You pass a color object and the absolute opacity % (higher value means less transparent):

fade(@color, 50%);   // Return @color with 50% opacity in rgba

Related questions

Correct way to create rounded corners in Twitter Bootstrap

I've just started with Twitter Bootstrap and here is one question. I am creating custom <header> block, and I want it's bottom corners to be rounded. Is there any "correct" way to do this by using predefined classes, …

Read More
Is it possible to use vh minus pixels in a CSS calc()?

I have following CSS rule in a Less file: .container { min-height: calc(100vh - 150px); } Which doesn't work at all. I want to make container full window height and minus header, footer fixed height. How can I do that?

Read More
Double border with different color

With Photoshop, I can put two different border to an element with two different color. And with that, I can make many dynamic shade-effect with my elements. Even with Photoshop effects, I can manage that with Drop Shadow and Inner …

Read More