循环通过Less中的mixin参数

时间:2014-08-09 18:49:32

标签: css less mixins less-mixins css-preprocessor

我正在尝试为供应商属性创建Less mixin,允许某人指定他们想要使用的CSS属性,属性的价值以及他们想要的供应商(Opera,Mozilla,Firefox, Webkit,IE,无)。

我最初在SASS here中编写了代码,但很难将其移植到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;
}

但是现在却没有。

那么我该如何循环遍历此mixin中的vendors参数,或者我甚至可以在Less中执行此操作?

1 个答案:

答案 0 :(得分:2)

您可以使用以下方法遍历vendors参数。代码很容易理解,但我添加了一些内联注释以使其更容易。

<强> LESS:

.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 Demo

其他信息:

  1. seven-phases-max创建了一个包装器mixin,用于模仿LESS中的for循环,其中的示例可以在this thread中找到。这是一个非常简单但有效的方法,我建议你看看它。我没有在上面的示例代码中使用它,因为我想显示执行循环的最基本方法。在评论中,他也很好地贡献了gist,它使用了for包装。

  2. This是另一种在LESS中添加供应商前缀的通用方法,但它无法根据所需的供应商前缀列表进行选择性处理。

  3. 在上面的示例中,official列表中不需要vendors关键字,因为它是自动填充的。总是留在那里以备将来证明是一种很好的做法。