在LESS中，我可以在类/混合“模式"上循环吗? [英] In LESS, can I loop over class/mixin "patterns"?

问题描述

我需要循环处理超过400个Font Awesome图标变量(请参见@fa-var-*，即@fa-var-apple，@fa-var-archive等.

I need loop over 400+ Font Awesome icon variables (look at the source) by a "pattern", I mean the pattern is @fa-var-*, i.e. @fa-var-apple, @fa-var-archive and so on.

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

Purpose is create some custom class like .btn-apple, .btn-archive and using the unicode value inside the variable.

这在LESS中有可能吗?

Is this possible in LESS?

推荐答案

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

You can create multiple classes dynamically by using array loops like below. However, the array list values have to be defined prior hand for the loop to be executed.

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

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

CodePen演示

您还可以使用 seven-phases-max 在此答案.这是非常有用的. (不幸的是，我只能给他一个+1:D)

You can also use the "for" snippet that seven-phases-max has provided in this answer. It is very useful. (Unfortunately I could give him only one +1 :D)

注意:这并不是说不能直接从文件读取.由于LESS确实支持JS评估，因此可以通过使用文件阅读器(甚至可能是AJAX请求)，然后使用Regex查找模式并循环返回数组等来完成.

Note: This is not to say that direct reading from the file is not possible. Since LESS does support JS evaluation, it can be done by using file reader (or maybe even AJAX request), then using Regex to find patterns and loop over the returned array etc. But it becomes way too complex a function which would become an overkill.

这篇关于在LESS中，我可以在类/混合“模式"上循环吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！