Question

我正在学习如何使用LESS。我对C ++有一个很好的理解。我想为渐变创建一些Mixins。我开始为它编写mixins，这样我就可以输入.gradient（“起始侧即顶部”，第一种颜色，第二种颜色）或.gradient（“起始侧即顶部”，第一种颜色，第一次停止，第二种颜色，第二站），但对于有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 ); 
}

（顶部mixin的参数是颜色，百分比，颜色，百分比，底部mixin的参数是颜色，颜色，颜色，颜色）

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

LESS是否会解决两者之间的差异，因为变量是＆gt;不同？或者我应该找到不同的路线来做到这一点？

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

或者，您可以使用带有类型函数的警卫：http://lesscss.org/features/#mixin-guards-feature：http://lesscss.org/functions/#type-functions。

AndroidManifest.xml

即使在使用上面第一个mixins的后卫时也要小心，第二个mixin仍然匹配而Less编译所有匹配的mixin，所以你还必须为你的第二个mixin设置一个守卫：

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

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

1 个答案: