我有这个混音:
.gradient(@alpha, ...) {
@r: extract(@arguments,1);
@g: extract(@arguments,2);
@b: extract(@arguments,3);
background: -moz-linear-gradient(top, rgba(@r,@g, @b, .2) 0%, rgba(0,0,0,@alpha) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(@r,@g, @b, .2)), color-stop(100%,rgba(0,0,0,@alpha)));
background: -webkit-linear-gradient(top, rgba(@r,@g, @b, .2) 0%,rgba(0,0,0,@alpha) 100%);
background: -o-linear-gradient(top, rgba(@r,@g, @b, .2) 0%,rgba(0,0,0,@alpha) 100%);
background: -ms-linear-gradient(top, rgba(@r,@g, @b, .2) 0%,rgba(0,0,0,@alpha) 100%);
background: linear-gradient(to bottom, rgba(@r,@g, @b, .2) 0%,rgba(0,0,0,@alpha) 100%);
}
设置颜色和alpha:
@rgbColor: 221,73,50;
@gradientAlpha: 0.3;
使用它:
.wrapper .gradient { .gradient( @gradientAlpha, @rgbColor ); }
返回:
SyntaxError: error evaluating function `rgba`: color functions take numbers as parameters
似乎工作得非常好,直到我添加额外的alpha参数。我已经在网上搜索了24小时,但找不到任何可以解释为什么这个错误会悄悄上升的东西。任何人都可以对此有所了解吗?
非常感谢!
编辑:
根据评论中的七个短语 - 最大值,我尝试了以下内容:
.gradient(...) {
@color: extract(@arguments,1);
@alpha: extract(@arguments,2);
background: -moz-linear-gradient(top, fade(@color, .2) 0%, color(0,0,0,@alpha) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,fade(@color, .2)), color-stop(100%,fade(0,0,0,@alpha)));
background: -webkit-linear-gradient(top, fade(@color, .2) 0%,fade(0,0,0,@alpha) 100%);
background: -o-linear-gradient(top, fade(@color, .2) 0%,fade(0,0,0,@alpha) 100%);
background: -ms-linear-gradient(top, fade(@color, .2) 0%,fade(0,0,0,@alpha) 100%);
background: linear-gradient(to bottom, fade(@color, .2) 0%,fade(0,0,0,@alpha) 100%);
}
@myColor: 221,73,50;
@gradientAlpha: 30%;
.wrapper .gradient { .gradient(@myColor, @gradientAlpha); }
但是这会返回以下错误:
SyntaxError: error evaluating function `fade`: Object #<Object> has no method 'toHSL'