信息就少混入

只是一个（希望）约LESS混入快速的问题：难道这两个混入某种方式结合？因为它们共享了很多相同的信息，只是一个增加了一个额外的颜色。信息就少混入

.gradient-top(@color-1, @color-2){ 
    background-color: @color-2; 
    background: -webkit-linear-gradient(top, @color-1, @color-2); 
    background: -moz-linear-gradient(top, @color-1, @color-2); 
    background: -ms-linear-gradient(top, @color-1, @color-2); 
    background: -o-linear-gradient(top, @color-1, @color-2); 
    background: linear-gradient(top, @color-1, @color-2); 
} 

.gradient-middle(@color-1, @color-2, @color-3){ 
    background-color: @color-2; 
    background: -webkit-linear-gradient(top, @color-1, @color-2, @color-3); 
    background: -moz-linear-gradient(top, @color-1, @color-2, @color-3); 
    background: -ms-linear-gradient(top, @color-1, @color-2, @color-3); 
    background: -o-linear-gradient(top, @color-1, @color-2, @color-3); 
    background: linear-gradient(top, @color-1, @color-2, @color-3);  
}

来源

2013-08-21 Eric Wolf

LESS支持通过@arguments变量访问传递给一个mixin的所有参数：

.gradient(@color-1, @color-2, ...) { 
    @gradient-stops: ~`"@{arguments}".slice(1, -1)`; 
    background-color: @color-2; 
    background: -webkit-linear-gradient(top, @gradient-stops); 
    background: -moz-linear-gradient(top, @gradient-stops); 
    background: -ms-linear-gradient(top, @gradient-stops); 
    background: -o-linear-gradient(top, @gradient-stops); 
    background: linear-gradient(top, @gradient-stops); 
}

我们需要选择插补（~）和内嵌的JavaScript评价（使用反引号）保存逗号 - 否则，我们会得到background: linear-gradient(top, #color-1 #color-2 #color-n);，这当然是不正确的。

这混入做的另一件事是通过“休息”符号（...）接受2个以上参数 - 这让我们称具有三种颜色的混合以及两个：

.gradient(#FFF, #CCC, #000) // A valid invocation of the mixin

来源

2013-08-21 06:21:53

所以调用'.gradient（＃000，＃111）'给了我'背景：线性梯度（顶部，＃000，＃111）'和调用'.gradient（＃000，＃111，＃000）'给出'背景：线性 - 梯度（顶部，＃000，＃111，＃000）'？ –

@EricWolf - 是的，它的确会:-) –

我刚刚看到你的编辑，现在我相信它完全解释了它。 –

信息就少混入

回答

相关问题