Css 使用不同的变量类型减少重载混合

我正在学习如何减少使用。我对C++有着很好的理解。我想为渐变创建一些混合。我开始为它编写混音，这样我就可以只键入.gradient（“起始侧，即顶部”，第一种颜色，第二种颜色）或.gradient（“起始侧，即顶部”，第一种颜色，第一种停止，第二种颜色，第二种停止），但对于有2、3或4种停止的渐变。在开始编写下一个包含四种颜色的函数之前，我想问一下，不同的变量类型是否可以重载较少的mixin。例如：

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

（顶部混合的参数为颜色、百分比、颜色、百分比，底部混合的参数为颜色、颜色、颜色、颜色）

会因为变量不同而不理解两者之间的差异吗？ 或者我应该找一条不同的路线来做这件事

编辑：

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

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

如果第二个参数有stops，则为true；如果没有stops，则为false

会不会因为变量>不同而不理解两者之间的差异？或者我应该找一条不同的路线来做这件事

不，更少的参数匹配基于参数的数量，但不检查变量的类型。但是Less可以检查参数的值，请参见

或者，您可以将guards:与类型函数一起使用：

即使在如上所述为第一个mixin使用保护时，也要小心，第二个mixin仍然匹配并且较少编译所有匹配的mixin，因此您还必须为第二个mixin设置保护：

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

---

这就是我的方式：

.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

你有没有试着运行你的代码，看看你的更改是否不受影响？是的，当我这样做的时候。渐变（顶部，蓝色，25%，红色，75%）可以正常工作，但当我这样做的时候。渐变（顶部，蓝色，红色，绿色，蓝色）不能正常工作。有没有一种方法可以使它作用于变量的类型？我使用的是direction.gradient（@、@color、@color）的参数匹配。我应该为这样的停止创建另一个。渐变（@，@，颜色，停止，颜色，停止）。做第二个开关时，只需像这样说“停止”。。渐变（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；}

这意味着两个混音器都匹配您的来电。我可以像这样将它应用于基本混音器：（（在符号处）颜色，（在符号处）停止，（在符号处）结束颜色，（在符号处）结束时停止启动（u-stop））{}而不是将其应用于所有其他的？然后两个/所有混音仍然匹配，尝试

echo.m（@b）when（isnumber（@b））{p:@b；}.m（@v）{p2:@v；}test{.m（1）；}”{lessc-

我不确定我是否理解你最后的评论，你能把它放在答案中吗？

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