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等库更好。

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

@image参数的默认值设置为none，因为这不是URL，而是处理空值/空值处理。

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

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

.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属性应该是改为使用。

LESS：连接多个背景规则

1 个答案: