Less 减：连接多个后台规则

我有一个mixin，它创建了一个带有厂商前缀的渐变，除了另一个

背景图像

之外，我还想将这个背景添加到一个DIV中

.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如下所示：

.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灵活性的情况下为其他供应商提供前缀呢？我试图在其他人身上添加

+

符号“

背景图像：-webkit….

”规则，但在这种情况下，生成的CSS将是：

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

---

…显然不正确。。。有什么建议吗？

使用Less生成供应商前缀（或相关项目）不是最好的方法。最好使用诸如无前缀或自动前缀器等库

话虽如此，对于您的情况，我认为对图像使用单独的参数将是最好的选择。仅当输入参数是URL时，函数才会返回

true

@image

参数的默认值设置为

none

，因为这不是URL，将处理空白/空值

.horizontal（@start color:#555；@end color:#333；@start percent:0%；@end percent:100%；@image:none）{
背景：@开始颜色；
&当（isurl（@image））{
背景图像：@image，-webkit线性渐变（左，@start color@start percent，@end color@end percent）；
背景图像：@image，-o-linear-gradient（左，@start color@start percent，@end color@end percent）；
背景图像：@图像，线性渐变（向右，@start color@start percent，@end color@end percent）；
}
&当不是时（isurl（@image））{
背景图像：-webkit线性渐变（左，@start color@start percent，@end color@end percent）；
背景图像：-o-线性-渐变（左，@start color@start percent，@end color@end percent）；
背景图像：线性渐变（向右，@start color@start percent，@end color@end percent）；
}
背景重复：重复-x；
}
傅先生{
.水平（@image:url（'bg.png'））；
}
.foo2{
.水平（@image:'bg.png'）；
}

在上面的mixin中，基于

@image

变量的值是否为URL，将生成适当的输出

---

在某些情况下，除了渐变之外，您可能希望使用颜色（而不是/除了图像），为此，您可以进一步增强混音，如下所示：

.horizontal（@start-color:#555；@end-color:#333；@start-percent:0%；@end-percent:100%；@image:none；@color:none）{
背景：@开始颜色；
&当（isurl（@image））而不是（iscolor（@color））时{
背景图像：@image，-webkit线性渐变（左，@start color@start percent，@end color@end percent）；
背景图像：@image，-o-linear-gradient（左，@start color@start percent，@end color@end percent）；
背景图像：@图像，线性渐变（向右，@start color@start percent，@end color@end percent）；
}
&当（iscolor（@color））和非（isurl（@image））时{
背景图像：@color，-webkit线性渐变（左，@start color@start percent，@end color@end percent）；
背景图像：@color，-o-linear-gradient（左，@start color@start percent，@end color@end percent）；
背景图像：@color，线性渐变（向右，@start color@start percent，@end color@end percent）；
}
&当（isurl（@image））和（iscolor（@color））{
背景图像：@color，@image，-webkit线性渐变（左，@start color@start percent，@end color@end percent）；
背景图像：@color，@image，-o-linear-gradient（左，@start color@start percent，@end color@end percent）；
背景图像：@color，@image，线性渐变（向右，@start color@start percent，@end color@end percent）；
}
&非时（isurl（@image））和非时（iscolor（@color））{
背景图像：-webkit线性渐变（左，@start color@start percent，@end color@end percent）；
背景图像：-o-线性-渐变（左，@start color@start percent，@end color@end percent）；
背景图像：线性渐变（向右，@start color@start percent，@end color@end percent）；
}
背景重复：重复-x；
}
傅先生{
.horizontal（@image:url（'bg1.png'））；
}
.foo2{
.水平（@image:'bg.png'）；
}
.3{
.水平（@颜色：蓝色）；
}
.3{
.水平（@color:red；@image:url（'abc.gif'））；
}

---

注意：我在上面的示例中使用了

背景图像

属性，但是如果我们想使用纯色以及渐变和/或图像，那么应该使用

背景

属性。

谢谢Harry，我从著名的CSS框架中获取了这种插件，显然，它仍然使用硬编码的供应商前缀。无论如何，我之所以使用它，是因为目前我没有使用node.js编译更少的代码，而是使用类似WinLESS的GUI。有没有办法在没有node.js的情况下使用库？谢谢你，伙计。我从来没有真正尝试过用更少的资源使用图书馆，因为到目前为止我还没有做过专业的网页设计。我想一定有办法做到这一点。哇，非常完整的答案，它仍然有可能同时拥有颜色、图像和渐变……。：-））@LucaDetomi：我已经修改了代码，以同时支持这三个方面。如果可能，请将答案标记为已接受：）