Css 以较少的时间循环通过mixin参数

我正在尝试为供应商属性创建一个较少的混合，允许某人指定他们想要使用的CSS属性、属性的值以及他们想要它的供应商（Opera、Mozilla、Firefox、Webkit、IE、none）

我最初是用SASS编写代码的，但很难将其移植到更少的版本

以下是我目前拥有的：

.vendor(@property, @value, @vendors...) {
  .vendor-detect() when (@vendors = webkit) {
    -webkit-@{property}: @value; 
  }

  .vendor-detect() when (@vendors = moz) {
    -moz-@{property}: @value; 
  }

  .vendor-detect() when (@vendors = ms) {
    -ms-@{property}: @value; 
  }

  .vendor-detect() when (@vendors = o) {
    -o-@{property}: @value; 
  }

  .vendor-detect() when (@vendors = official) {
    @{property}: @value; 
  }

  .vendor-detect();
}

现在，当您这样使用代码时：

.button { 
    .vendor(border-radius, 4px, official);
}

你会得到：

.button {
  border-radius: 4px;
}

但我希望能够使用mixin声明多个供应商，因此使用：

.button { 
    .vendor(border-radius, 4px, webkit moz official);
}

应向我提供：

.button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

但现在没有

---

那么，我如何在这个mixin中循环使用

vendors

参数，或者我甚至可以在更少的时间内完成

您可以使用以下方法循环使用

供应商

参数。代码很容易理解，但我添加了一些内联注释以使其更容易理解

更少：

.vendor(@property, @value, @vendors...) {
    .loop-vendors(@vendorCount) when (@vendorCount > 0){ // for loop for creating the req prefixes 
        .loop-vendors(@vendorCount - 1); // call the next iteration
        @vendor: extract(@vendors, @vendorCount); //extract the value from vendors list based on loop index
        -@{vendor}-@{property}: @value; // populate the vendor specific versions.
    }
    .loop-vendors(length(@vendors)); // call the loop based on length of vendors list

    @{property}: @value; //populate the official value finally
}


.button { 
    .vendor(border-radius, 4px, webkit moz ms o); // calling the vendor mixin
    .vendor(box-shadow, 1px 1px 4px gray, webkit moz ms o); // calling the vendor mixin
}

.button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 1px 1px 4px #000000;
  -moz-box-shadow: 1px 1px 4px #000000;
  -ms-box-shadow: 1px 1px 4px #000000;
  -o-box-shadow: 1px 1px 4px #000000;
  box-shadow: 1px 1px 4px #000000;
}

编译输出：

.vendor(@property, @value, @vendors...) {
    .loop-vendors(@vendorCount) when (@vendorCount > 0){ // for loop for creating the req prefixes 
        .loop-vendors(@vendorCount - 1); // call the next iteration
        @vendor: extract(@vendors, @vendorCount); //extract the value from vendors list based on loop index
        -@{vendor}-@{property}: @value; // populate the vendor specific versions.
    }
    .loop-vendors(length(@vendors)); // call the loop based on length of vendors list

    @{property}: @value; //populate the official value finally
}


.button { 
    .vendor(border-radius, 4px, webkit moz ms o); // calling the vendor mixin
    .vendor(box-shadow, 1px 1px 4px gray, webkit moz ms o); // calling the vendor mixin
}

.button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 1px 1px 4px #000000;
  -moz-box-shadow: 1px 1px 4px #000000;
  -ms-box-shadow: 1px 1px 4px #000000;
  -o-box-shadow: 1px 1px 4px #000000;
  box-shadow: 1px 1px 4px #000000;
}

其他信息：

创建了一个包装器mixin，用于在中模拟for循环，并在中找到了一个示例。这是一个非常简单但有效的方法，我建议你看看。我没有在上面的示例代码中使用它，因为我想展示执行循环的最基本方式。在评论中，他还利用了

for

包装器，善意地提供了这一点

是另一种在LESS中添加供应商前缀的通用方法，但它不会根据所需供应商前缀列表选择性地进行处理

在上面的示例中，

供应商

列表中不需要

官方

关键字，因为它是自动填充的。这是一个很好的做法，总是把它留在那里，以备将来使用

---

我怀疑它需要所有这些条件。假设列表是一个前缀列表，并且始终使用标准CSS属性，那么整个内容可以简化为。虽然我不能跳过一句话“我们现在几乎不需要这样的混音”。@seven Phase max:两方面都同意。对于第一个问题，我更关心的是最初回答这个问题，而不是思考如何进一步简化它。我现在已经做了。对于第二个问题，我想提一提（这就是为什么我首先链接了你的答案），但OP在问题中明确表示，他希望根据用户定义的列表添加前缀，因此保持原样。非常感谢@Harry和@seven Phase max！我很感激能够在使用

for

包装器和不使用

包装器的情况下看到循环，这正是我想要的。