在 LESS 中，我可以遍历类/mixin“模式”吗？

Posted 2023-03-15

【中文标题】在 LESS 中，我可以遍历类/mixin“模式”吗？

【英文标题】：In LESS, can I loop over class/mixin "patterns"?

【发布时间】：2014-09-02 12:59:34

【问题描述】：

我需要通过“模式”循环超过 400 多个 Font Awesome 图标变量（查看source），我的意思是模式是@fa-var-*，即@fa-var-apple、@fa-var-archive 等等。

目的是创建一些自定义类，如.btn-apple、.btn-archive，并使用变量内的 unicode 值。

这在 LESS 中可行吗？

【问题讨论】：

您的意思是使用像 this 这样的数组循环还是遍历整个 variables.less 文件来获取其中存在的所有变量而不是定义数组？

不，不直接。要遍历这些类，您必须创建一个明确的列表，例如 @icons: apple, archive, array, etc.;（尽管如果您真的需要它，这并不是那么乏味，因为这可以通过任何合适的 FA 图标列表中的简单搜索和替换转换来完成）。

例如like this 并循环遍历 like that 对。如果您不需要图标字符代码，也可以从列表中删除它们以简化循环。

@seven-phases-max：这与我所做的类似。但我想一个办法可能是使用 javascript 文件阅读器来读取内容，然后以某种方式将其放入 LESS，因为 LESS 可以评估 JS。但不要认为这是值得的努力。

谢谢你们。我的尝试当然是直接循环，因为变量列表可能会改变（添加了新图标）。 @Harry 你能写一个我会接受的答案吗？

【参考方案1】：

您可以使用如下的数组循环动态创建多个类。但是，必须事先定义数组列表值才能执行循环。

@variables: adjust,apple,archive,camera,coffee;

.loop(@varCount) when (@varCount > 0)
  @temp: extract(@variables,@varCount);
  .btn-@temp
    font-family: FontAwesome;
    @varName: "fa-var-@temp";
    &:beforecontent: @@varName;
  
  .loop(@varCount - 1);

.loop(length(@variables));

CodePen Demo

您也可以使用seven-phases-max 在this answer 中提供的“for”sn-p。这是非常有用的。 （不幸的是，我只能给他+1 :D）

注意：这并不是说不能直接从文件中读取。由于 LESS 确实支持 JS 评估，因此可以通过使用文件阅读器（甚至可能是 AJAX 请求）来完成，然后使用正则表达式查找模式并遍历返回的数组等。但是它变得过于复杂的函数会变得过大.