4

我正在尝试从最好的十六进制值中提取单个 r、g、b 值，然后将这些值插入背景渐变中。这个想法是我不必摆弄单个 rgb 值。我正在尝试使用红色（@color）、绿色（@color）、蓝色（@color）函数，但我得到的错误是：错误评估函数rgb：颜色函数将数字作为参数

@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 指出，上面的代码实际上是有效的，所以我包含了我正在尝试使用的实际 mixin：

.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);
}
4

1 回答 1

3

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
于 2013-05-03T14:07:07.237 回答