具有不同变量类型的更少重载混合答案

【问题标题】：Less overloading mixins with different variable types具有不同变量类型的更少重载混合
【发布时间】：2015-05-02 06:57:52
【问题描述】：

我正在学习如何使用 LESS。我对 C++ 有很好的理解。我想为渐变创建一些 Mixins。我开始为它编写 mixins，这样我就可以输入 .gradient("the start side i.e. top", first color, second color) 或 .gradient("the start side i.e. top", first color, first stop, second color ，第二个停靠点），但对于具有 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 个参数，但下面的也有。

.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){}

第二个参数如果有停止则为真，如果没有则为假？

【问题讨论】：

您是否尝试过运行您的代码以查看 LESS 是否无法理解您的更改？
是的，当我做 .gradient (top, blue, 25%, red, 75%) 时它可以正常工作，但是当我做 .gradient (top, blue, red, green, blue) 时却没有不能正常工作。有没有办法让它作用于变量的类型？

标签： css less gradient

【解决方案1】：

LESS 会因为变量不同而无法理解两者之间的区别吗？还是我应该找到其他途径来做到这一点？

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

您也可以使用守卫：http://lesscss.org/features/#mixin-guards-feature 和类型函数：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)){ }

【讨论】：

我正在使用与方向 .gradient(@_, @color, @color) 匹配的参数。我应该为这样的停止创建另一个 .gradient(@_,@_, color, stop, color, stop)。使第二个开关像这样说“停止”： .gradient(top,stops,@color,@stop,@color,@stop) 会干扰 .gradient(@_,@color,@color,@color, @color,@color) 如果我达到 5 种颜色？
不，这不起作用。试试echo ".m(top){p:top;}.m(@v){p2:@v;}test {.m(top); }" | lessc -，它的输出是test { p: top; p2: top; }，这意味着两个mixin都匹配你的调用
我可以像这样将它应用到基本 mixin 中吗：.gradient((at sign)_, (at sign)color, (at sign)stop, (at sign)end_color, (at sign) end_stop) when (ispercentage((at sign)start_stop)){} 而不是将其应用于所有其他人？
那么这两个/所有mixin仍然匹配，试试echo ".m(@b) when (isnumber(@b)){p:@b;}.m(@v){p2:@v;}test {.m(1); }" | lessc -
我不确定我是否理解你最后的评论，你能把它放在答案中吗？

【解决方案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

【讨论】：