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
Post a Comment