在 Less 中循环使用 mixin 参数

Posted 2023-03-15

【中文标题】在 Less 中循环使用 mixin 参数

【英文标题】：Loop through mixin parameter in Less

【发布时间】：2014-10-03 00:28:43

【问题描述】：

我正在尝试为供应商属性创建一个 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】：

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

少：

.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

附加信息：

seven-phases-max 创建了一个包装器 mixin，用于模拟 LESS 中的 for 循环，在 this thread 中可以找到一个示例。这是一个非常简单但有效的方法，我建议您看看它。我没有在上面的示例代码中使用它，因为我想展示最基本的循环方式。在 cmets 中，他还善意地贡献了这个 gist，它使用了 for 包装器。

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

在上述示例中，vendors 列表中不需要 official 关键字，因为它是自动填充的。始终将其留在那里以备将来验证是一种很好的做法。

【讨论】：

我怀疑它需要所有这些条件。假设列表是一个前缀列表并且总是使用标准的 CSS 属性，那么整个东西可以简化为this。虽然我不能跳过“这些天我们几乎不需要这样的 mixins at all”的注释。

@seven-phases-max：在这两个方面都同意。对于第一个问题，我最初更关心的是回答这个问题，而不是考虑如何进一步简化它。我现在已经做到了。对于第二个，我想提一下（这就是为什么我首先链接了你的答案），但是 OP 具​​体有问题，他想根据用户定义的列表添加前缀，因此保持原样。