LESS：串联多个后台规则

Question

我有一个 mixin 可以创建带有供应商前缀的渐变，我想将此背景添加到 DIV 以及另一个 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;
}

我认为解决方案可以使用 comma merging，在我的示例中我只添加到标准 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 灵活性的情况下也为其他供应商提供前缀？我试图在其他“background-image: -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;
}

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

Answer 1

使用 Less 生成供应商前缀（或相关项目）并不是最好的方法。最好使用 Prefix Free 或 Auto Prefixer 等库

话虽如此，对于您的情况，我认为对图像使用单独的参数是最佳选择。 isurl() 函数 returns true 只有当输入参数是 URL.

@image 参数的默认值设置为 none，因为这不是 URL，并且会处理 blank/null 值处理。

.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，将生成适当的输出。

在某些情况下，除了渐变之外，您可能还想使用一种颜色（而不是 of/in 添加到图像中），为此您可以进一步增强混入，如下所示：

.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 属性但是如果我们想使用纯色和渐变 and/or图像，则应使用 background 属性。

LESS：串联多个后台规则

LESS: concatenate multiple background rules

background-image

mixins

less

less-mixins