CODEWITHSUNDEEP
cssfunctionless
Alan
Alan

Reputation: 307

LESS css: trying to use the red, green, and blue functions to get rgb values and then insert into gradient

I'm trying to pull individual r, g, b values from preferably a hex value, then insert those values into a background gradient. The idea is that I don't have to fiddle around with individual rgb values. I'm trying to use the red(@color), green(@color), blue(@color) functions but the error I get is: error evaluating function rgb: color functions take numbers as parameters

@color: #E28141;

.test-gradient (@color, @topalpha, @topstop, @bottomalpha, @bottomstop) {
@red1:red(@color);
@green1:green(@color);
@blue1:blue(@color);

background: linear-gradient(to bottom, rgba(@red1,@green1,@blue1,@topalpha) @topstop,rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
}

Martin pointed out that the above code actually works so I'm including the actual mixin I'm trying to use:

.test-gradient (@color, @topalpha, @topstop, @bottomalpha, @bottomstop) {
@red1:red(@color); @green1:green(@color); @blue1:blue(@color);
background: rgb(@red1,@green1,@blue1);
background: -moz-linear-gradient(top, rgba(@red1,@green1,@blue1,@topalpha) @topstop, rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
background: -webkit-gradient(linear, left top, left bottom, color-stop(@topstop,rgba(@red1,@green1,@blue1,@topalpha)), color-stop(@bottomstop,rgba(@red1,@green1,@blue1,@bottomalpha)));
background: -webkit-linear-gradient(top, rgba(@red1,@green1,@blue1,@topalpha) @topstop,rgba(@@red1,@green1,@blue1,@bottomalpha) @bottomstop);
background: -o-linear-gradient(top, rgba(@red1,@green1,@blue1,@topalpha) @topstop,rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
background: -ms-linear-gradient(top, rgba(@red1,@green1,@blue1,@topalpha) @topstop,rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
background: linear-gradient(to bottom, rgba(@red1,@green1,@blue1,@topalpha) @topstop,rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
}

Upvotes: 4

Views: 5903

Answers (1)

Martin Turjak
Martin Turjak

Reputation: 21234

it seems to work fine to me,

i tried this:

.test-gradient(@color, .5, 10%, .9, 90%);

and the output was:

background: linear-gradient(to bottom, rgba(226, 129, 65, 0.5) 10%, rgba(226, 129, 65, 0.9) 90%);

so I am not sure what you were passing in the variables, maybe you can show us an example that produces the error.

Edit:

you just had some typos (used green insted of @green once and @@red in another place). This should work now:

.test-gradient (@color, @topalpha, @topstop, @bottomalpha, @bottomstop) {
@red1:red(@color);
@green1:green(@color);
@blue1:blue(@color);
background: rgb(@red1, @green1, @blue1);
background: -moz-linear-gradient(top, rgba(@red1,@green1,@blue1,@topalpha) @topstop, rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
background: -webkit-gradient(linear, left top, left bottom, color-stop(@topstop,rgba(@red1,@green1,@blue1,@topalpha)), color-stop(@bottomstop,rgba(@red1,@green1,@blue1,@bottomalpha)));
background: -webkit-linear-gradient(top, rgba(@red1,@green1,@blue1,@topalpha) @topstop,rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
background: -o-linear-gradient(top, rgba(@red1,@green1,@blue1,@topalpha) @topstop,rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
background: -ms-linear-gradient(top, rgba(@red1,@green1,@blue1,@topalpha) @topstop,rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
background: linear-gradient(to bottom, rgba(@red1,@green1,@blue1,@topalpha) @topstop,rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
}

Note:

functions tint, shade, multiply, screen, overlay, hardlight, difference, exclusion, average, negation, softlight, red, green, blue and contrast have been only introduced in LESS 1.3.1.

In older versions of LESS for example

red(#E28141)

will return

red(#E28141)

instead of the number

226

Upvotes: 4

Related Questions