较少:串联多个背景规则 [英] LESS: concatenate multiple background rules
问题描述
我有一个mixin，它使用供应商的前缀创建一个渐变，我想将此背景除另一个background-image之外添加到DIV中.
I have a mixin that creates a gradient with vendors' prefixes, and I would like to add this background to a DIV in addition to another background-image.
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background:@start-color;
background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image+: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
background-repeat: repeat-x;
}
.foo
{
background-image+:url('bg.png');
.horizontal;
}
我认为解决方案可以使用逗号合并，在我的示例中我只添加了标准CSS3渐变声明.这样做，这里是生成的CSS:
I thought the solution could be use of comma merging, that in my example I added only to standard CSS3 gradient declaration. Doing this, here the generated CSS:
.foo {
background-image: url('bg.png'), linear-gradient(to right, #555555 0%, #333333 100%);
background: #555555;
background-image: -webkit-linear-gradient(left, #555555 0%, #333333 100%);
background-image: -o-linear-gradient(left, #555555 0%, #333333 100%);
background-repeat: repeat-x;
}
是正确的，但是如何在不失去mixin灵活性的情况下为其他供应商提供前缀呢?我尝试在其他"background-image: -webkit...."规则上也添加+符号，但是在这种情况下，结果CSS将是:
It's correct, but how to have this also for others vendors prefixes without losing flexibility of mixin? I tried to add + sign also on others "background-image: -webkit...." rules, but in this case, resulting CSS would be:
.foo {
background-image: url('bg.png'), -webkit-linear-gradient(left, #555555 0%, #333333 100%), -o-linear-gradient(left, #555555 0%, #333333 100%), linear-gradient(to right, #555555 0%, #333333 100%);
background: #555555;
background-repeat: repeat-x;
}
...显然不正确...有什么建议吗?
...obviously not correct... any suggestion?
推荐答案
使用更少的方法来生成供应商前缀(或相关项目)不是最好的方法.最好使用Free Prefix或Auto Prefixer等库.
Using Less for generating vendor prefixes (or related items) is not the best way to do it. It is much better to use the libraries like Prefix Free or Auto Prefixer etc.
话虽如此，对于您的情况，我认为为图像使用单独的参数将是最佳选择.仅当输入参数是URL时， isurl() 函数才返回true.
Having said that, for your case I think using a separate parameter for the image would be the best option. The isurl() function returns true only if the input parameter is a URL.
@image参数的默认值设置为none，因为它不是URL，并且将处理空白/空值处理.
The default value for the @image parameter is set to none because this is not a URL and will take care of the blank/null value handling.
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%; @image: none) {
background:@start-color;
& when (isurl(@image)){
background-image: @image, -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: @image, -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: @image, linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
}
& when not (isurl(@image)){
background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
}
background-repeat: repeat-x;
}
.foo{
.horizontal(@image: url('bg.png'));
}
.foo2{
.horizontal(@image: 'bg.png');
}
在上述mixin中，根据@image变量的值是否为URL，将生成适当的输出.
In the above mixin, based on whether the value for the @image variable is a URL or not, the appropriate output would be generated.
在某些情况下，除了渐变色以外，您可能还希望使用某种颜色(而不是图像/除了图像之外)，为此您可以进一步增强混合效果，如下所示:
In some cases, you may want to use a color (instead of/in addition to an image) in addition to the gradients and for that you can further enhance the mixin like below:
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%; @image: none; @color: none) {
background:@start-color;
& when (isurl(@image)) and not (iscolor(@color)){
background-image: @image, -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: @image, -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: @image, linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
}
& when (iscolor(@color)) and not (isurl(@image)){
background-image: @color, -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: @color, -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: @color, linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
}
& when (isurl(@image)) and (iscolor(@color)){
background-image: @color, @image, -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: @color, @image, -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: @color, @image, linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
}
& when not (isurl(@image)) and not (iscolor(@color)){
background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
}
background-repeat: repeat-x;
}
.foo{
.horizontal(@image: url('bg1.png'));
}
.foo2{
.horizontal(@image: 'bg.png');
}
.foo3{
.horizontal(@color: blue);
}
.foo3{
.horizontal(@color: red; @image: url('abc.gif'));
}
注意:我在上面的示例中使用了background-image属性，但是如果我们要使用纯色以及渐变色和/或图像，则应该使用background属性.
Note: I have used background-image property in the above sample but if we want use a solid color along with gradients and/or image, then the background property should be used instead.
这篇关于较少:串联多个背景规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
