如何在 LESS css 中为数组中的每个项目做一个

Question

我在 LESS css

中为每个项目编写 a 时遇到问题

我是 less 的新手，如果有人能给我举个例子，我将不胜感激

我正在使用以下内容：

    "less": "^3.11.3",
    "node-less-chokidar": "^0.4.1",
    "npm-run-all": "^4.1.5",

@values: 23, 14, 45;

    .as-test(@i: length(@a)) when (@i > 0) {
        @value: extract(@a, @i);

        .h-@{value}px {
         height: ~"@value"px;
        }        

        .as-test-(@i - 1);
    }

    .as-test(@values);

期望的输出：

.h-23px {
  height: 23px !important;
}
.h-14px {
  height: 14px !important;
}
.h-45px {
  height: 45px !important;
}

Answer 1

使用类似这样的东西

@values: 23, 14, 45;

.loop(@list,@i:1) when (@i <= length(@list)) {
  @current: extract(@list,@i)+0px;
  .h-@{current} {
    height: @current !important;
  }
  .loop(@list,@i+1);
}

.loop(@values);

Answer 2

Abhishek Kumar Tiwari（有效且有效）答案的替代方案：

@values: 23, 14, 45;

each(@values, {
  .h-@{value}px {
    height: unit(@value, px) !important;
  }
});

阅读更多：each（更少）

如何在 LESS css 中为数组中的每个项目做一个

How to do a For Each Item in an array in LESS css

css

less