拆分多个LESS参数

时间:2014-04-24 18:05:29

标签: css less mixins

我有这个混音:

.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'

0 个答案:

没有答案