In LESS, can I loop over class/mixin “patterns”?

问题

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.

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

Is this possible in LESS?

回答1:

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 Demo

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)

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.

来源：https://stackoverflow.com/questions/24705562/in-less-can-i-loop-over-class-mixin-patterns