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


i'm trying pull individual r, g, b values preferably hex value, insert values background gradient. idea don't have fiddle around individual rgb values. i'm trying use red(@color), green(@color), blue(@color) functions error is: error evaluating function rgb: color functions take numbers 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 above code works i'm including actual mixin i'm trying 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); } 

it seems work fine me,

i tried this:

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

and output was:

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

so not sure passing in variables, maybe can show example produces error.

edit:

you had typos (used green insted of @green once , @@red in place). 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 , contrast have been introduced in less 1.3.1.

in older versions of less example

red(#e28141) 

will return

red(#e28141) 

instead of number

226 

Comments

Popular posts from this blog

php - Why I am getting the Error "Commands out of sync; you can't run this command now" -

linux - Does gcc have any options to add version info in ELF binary file? -

java - Are there any classes that implement javax.persistence.Parameter<T>? -