减少具有不同变量类型的重载混合

Question

我正在学习如何使用 LESS。我对 C++ 有一定的了解。我想为渐变创建一些 Mixins。我开始为它编写 mixin，这样我就可以输入 .gradient( "the start side i.e. top", first color, second color) 或 .gradient( "the start side i.e. top", first color, first stop, second color, second stop) ，但对于具有 2、3 或 4 个停止点的渐变。在我开始写下一篇有四种颜色的文章之前，我想问一下 LESS mixins 是否可以被不同的变量类型重载。例如：

.gradient (top, @top_color, @top_stop, @bottom_color, @bottom_stop){
    background: @top_color;
    background: -moz-linear-gradient(top,  @top_color @top_stop, @bottom_color @bottom_stop); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@top_stop,@top_color), color-stop(@bottom_stop,@bottom_color)); 
    background: -webkit-linear-gradient(top,  @top_color @top_stop,@bottom_color @bottom_stop); 
    background: -o-linear-gradient(top,  @top_color @top_stop,@bottom_color @bottom_stop); 
    background: -ms-linear-gradient(top,  @top_color @top_stop,@bottom_color @bottom_stop); 
    background: linear-gradient(to bottom,  @top_color @top_stop,@bottom_color @bottom_stop); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@top_color', endColorstr='@bottom_color',GradientType=0 ); 
}
.gradient(@_,@top_color,@top_stop,@bottom_color,@bottom_stop){}

上面的 mixin 有 5 个参数，但是下面的 mixin 也有。

.gradient (top, @top_color, @middle_top_color, @middle_bottom_color, @bottom_color){
    background: @top_color; 
    background: -moz-linear-gradient(top,  @top_color 0%, @middle_top_color 25%, @middle_bottom_color 75%, @bottom_color 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@top_color), color-stop(25%,@middle_top_color), color-stop(75%,@middle_bottom_color), color-stop(100%,@bottom_color)); 
    background: -webkit-linear-gradient(top,  @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    background: -o-linear-gradient(top,  @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    background: -ms-linear-gradient(top,  @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    background: linear-gradient(to bottom,  @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@top_color', endColorstr='@bottom_color',GradientType=0 ); 
}

(top mixin的参数是color, percent, color, percent，bottom mixin的参数是color, color, color, color)

LESS会不会因为变量不同而看不懂两者的区别？还是我应该找到其他途径来执行此操作？

编辑：

这是一个好的解决方案还是有更好的方法？

.gradient (top, true, @top_color, @top_stop, @bottom_color, @bottom_stop){
    background: @top_color;
    background: -moz-linear-gradient(top,  @top_color @top_stop, @bottom_color @bottom_stop); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@top_stop,@top_color), color-stop(@bottom_stop,@bottom_color)); 
    background: -webkit-linear-gradient(top,  @top_color @top_stop,@bottom_color @bottom_stop); 
    background: -o-linear-gradient(top,  @top_color @top_stop,@bottom_color @bottom_stop); 
    background: -ms-linear-gradient(top,  @top_color @top_stop,@bottom_color @bottom_stop); 
    background: linear-gradient(to bottom,  @top_color @top_stop,@bottom_color @bottom_stop); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@top_color', endColorstr='@bottom_color',GradientType=0 ); 
}
.gradient(@_,true,@top_color,@top_stop,@bottom_color,@bottom_stop){}

.gradient (top, false, @top_color, @middle_top_color, @middle_bottom_color, @bottom_color){
    background: @top_color; 
    background: -moz-linear-gradient(top,  @top_color 0%, @middle_top_color 25%, @middle_bottom_color 75%, @bottom_color 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@top_color), color-stop(25%,@middle_top_color), color-stop(75%,@middle_bottom_color), color-stop(100%,@bottom_color)); 
    background: -webkit-linear-gradient(top,  @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    background: -o-linear-gradient(top,  @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    background: -ms-linear-gradient(top,  @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    background: linear-gradient(to bottom,  @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@top_color', endColorstr='@bottom_color',GradientType=0 ); 
}
.gradient(@_,false,@top_color,@middle_top_color,@middle_bottom_color,@bottom_color){}

如果第二个参数有止损点则为真，否则为假？

Answer 1

Will LESS undestand the difference between the two because the variables are > different? Or should I find a different route to do this?

不，Less 是根据参数的个数进行参数匹配，但不检查变量的类型。但是 Less 可以检查参数的值，请参阅 http://lesscss.org/features/#mixins-parametric-feature-pattern-matching

或者你可以使用守卫：http://lesscss.org/features/#mixin-guards-feature with type functions: http://lesscss.org/functions/#type-functions.

.gradient (top, @top_color, @top_stop, @bottom_color, @bottom_stop) when (ispercentage(@top_stop)) {}

即使像上面那样为第一个 mixin 使用守卫也要小心，第二个 mixin 仍然匹配并且 Less 编译所有匹配的 mixin，所以你还必须为你的第二个 mixin 设置一个守卫：

.gradient (top, @top_color, @middle_top_color, @middle_bottom_color, @bottom_color) when (iscolor(@middle_top_color)){ }

Answer 2

这就是我要采用的方式：

.gradient (top, @top_color, @top_stop, @bottom_color, @bottom_stop) when (ispercentage(@top_stop)){
    background: @top_color;
    background: -moz-linear-gradient(top,  @top_color @top_stop, @bottom_color @bottom_stop); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@top_stop,@top_color), color-stop(@bottom_stop,@bottom_color)); 
    background: -webkit-linear-gradient(top,  @top_color @top_stop,@bottom_color @bottom_stop); 
    background: -o-linear-gradient(top,  @top_color @top_stop,@bottom_color @bottom_stop); 
    background: -ms-linear-gradient(top,  @top_color @top_stop,@bottom_color @bottom_stop); 
    background: linear-gradient(to bottom,  @top_color @top_stop,@bottom_color @bottom_stop); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@top_color', endColorstr='@bottom_color',GradientType=0 ); 
}

.gradient (top, @top_color, @middle_top_color, @middle_bottom_color, @bottom_color) when (iscolor(@middle_top_color)){
    background: @top_color;
    background: -moz-linear-gradient(top,  @top_color 0%, @middle_top_color 25%, @middle_bottom_color 75%, @bottom_color 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@top_color), color-stop(25%,@middle_top_color), color-stop(75%,@middle_bottom_color), color-stop(100%,@bottom_color)); 
    background: -webkit-linear-gradient(top,  @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    background: -o-linear-gradient(top,  @top_color 0%,@middle_top_color 25%, @middle_bottom_color 75%,@bottom_color 100%); 
    background: -ms-linear-gradient(top,  @top_color 0%,@middle_top_color 25%, @middle_bottom_color 75%,@bottom_color 100%); 
    background: linear-gradient(to bottom,  @top_color 0%, @middle_top_color 25%, @middle_bottom_color 75%,@bottom_color 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@top_color', endColorstr='@bottom_color',GradientType=0 ); 
}
.gradient (@_, @var1, @var2, @var3, @var4) {}

它似乎对我来说工作正常。感谢@Bass

减少具有不同变量类型的重载混合

Less overloading mixins with different variable types

css

gradient

less