138

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?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
chubbyk
  • 6,212
  • 13
  • 53
  • 67

4 Answers4

368

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
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ronald Pauffert
  • 4,346
  • 1
  • 14
  • 15
  • 44
    @Soc answered the OP's question, but you gave us the answer EVERYONE ELSE came here to find! Thank you! – BillyNair Nov 05 '14 at 12:24
  • 1
    I think the amount parameter is not the transparency level but in contrary designates the opacity level? – mousio Mar 04 '15 at 20:31
  • 2
    @mousio Actually, by picking exactly `50%`, it's correctly both transparency and opacity. :) – Dem Pilafian May 23 '15 at 02:47
  • 1
    @mousio If you want to get really technical, I believe it's more accurately the proportion of the "translucent" color to blend with the color of each pixel which the element overlays -- see https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending :) But in practical terms, of course you're right; the percentage or decimal value represents the opacity level, not the transparency level! – Brian Lacy Sep 17 '15 at 14:10
  • 1
    @DemPilafian Actually, I think it depends whether the glass is 50% empty, or 50% full. – Brian Lacy Sep 17 '15 at 14:11
  • 6
    For the record this is a flaw in the API. I have to look it up every time I want to use it. It would be wise of them to sugar up the existing RGBA into a LESS call like SASS does -- rgba(@colorValue, .5) such that it would output the same exact hing as an actual CSS rgba declaration. But hey, that's me being whiney. :) – dudewad Dec 30 '15 at 23:16
  • 1
    Just in case someone is using SASS, the equivalent is `rgba( $base-color, .7 )`. [Link](https://robots.thoughtbot.com/controlling-color-with-sass-color-functions) – hailong Jul 10 '17 at 20:14
  • 1
    Thanks it worked for me ;) Just a little update : it seems that the fade functions has been replaced by fadein/fadeout : http://lesscss.org/functions/. – Ousmane Nov 16 '17 at 14:47
107

If you don't need an alpha key, you can simply use the hexadecimal representation of the color. An rgba color with a alpha of '1' is the same as the hexadecimal value.

Here are some examples to demonstrate that:

@baseColor: #d14836;

html {
    color: @baseColor;
    /* color:#d14836; */
}

body {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
    /* color:#d14836; */
}

div {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 0.5);
    /* rgba(209, 72, 54, 0.5); */
}

span {
    color: fade(@baseColor, 50%);
    /* rgba(209, 72, 54, 0.5); */
}

h3 {
    color: fade(@baseColor, 100%)
    /* color:#d14836; */
}

Test this code online: http://lesstester.com/

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Sebastian Stiehl
  • 1,880
  • 1
  • 14
  • 22
  • How about this error I got? `error evaluating function 'red': Cannot read property '0' of undefined` – Aldi Unanto Sep 13 '13 at 15:41
  • This hasn't been updated for a while but with Less PHP I am getting the following error - `@colorGold: color('#C6AF87'); .box { background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); }` Error is - Could not compile CSS file (screen.less): color expected for red(): failed at `background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); – Chris Oct 31 '13 at 14:47
  • 1
    @Chris you can assign the color directly to make this work with Less PHP it seem also work with the current less version so i adapted the example. `@colorGold: #C6AF87;` – Sebastian Stiehl Oct 31 '13 at 19:49
  • @Soc this was my eventual solution and I found it shortly after I don't know what gave me the impression I needed to wrap it in colour tags! – Chris Nov 06 '13 at 10:54
  • Check out my less function, http://stackoverflow.com/questions/14860874/how-to-convert-hex-color-to-rgba-with-less-compiler/18879171#18879171 – helpse Feb 14 '14 at 20:01
12

My Less mixin:

.background-opacity(@color, @opacity) {
    @rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);

    background-color: @rgba-color;

    // Hack for IE8:
    background: none\9; // Only Internet Explorer 8
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // Internet Explorer 9 and down
    // Problem: Filter gets applied twice in Internet Explorer 9.
    // Solution:
    &:not([dummy]) {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
    }
}

Try it.

EDITED: As seen on rgba background with IE filter alternative: IE9 renders both!, I added some lines to the mixin.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
helpse
  • 1,518
  • 1
  • 18
  • 29
3

It seems that with the recent Less update 3.81, you can use just two arguments in the rgba() function.

rgba(white, 0.3) or rgba(white, 30%) => rgba(255, 255, 255, 0.3)

It works for me, but I can't find it in the official documentation.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Dmitry Davydov
  • 987
  • 13
  • 21