2

我正在尝试为供应商属性创建一个 Less mixin，允许某人指定他们想要使用的 CSS 属性、属性的值以及他们想要它的供应商（Opera、Mozilla、Firefox、Webkit、IE ， 没有任何）。

我最初在这里用 SASS 编写代码，但很难将其移植到 Less。

这是我目前拥有的：

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

但现在没有。

那么如何vendors在这个mixin中循环遍历参数，或者我什至可以在Less中做到这一点？

4

1 回答 1

3

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

Codepen 演示

附加信息：

  1. Seven-phases-max创建了一个包装器 mixin，用于模仿 LESS 中的 for 循环，并且可以在此线程中找到一个示例。这是一个非常简单但有效的方法，我建议您看看它。我没有在上面的示例代码中使用它，因为我想展示最基本的循环方式。在评论中，他还善意地贡献了这个使用包装器的要点。for

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

  3. 在上面的示例official中，列表中不需要关键字，vendors因为它是自动填充的。始终将其留在那里以备将来证明是一个好习惯。

于 2014-08-10T03:31:48.723 回答