如何使用@loop 在 LESS 中创建类数组

Question

如何在 LESS 中使用@loop 或其他方法

创建以下类数组

.margin-top--1{
    margin-top:-1rem;
}
.margin-top--0-5{
    margin-top:-0.5rem;
}
.margin-top-0{
    margin-top:0rem;
}
.margin-top-0-5{
    margin-top:0.5rem;
}
.margin-top-1{
    margin-top:1rem;
}

Answer 1

我对 LESS 了解不多，所以可能有更简洁的解决方案，但这至少应该有效。

像您尝试的那样使用循环，但将值中的点替换为破折号，因此选择器是正确的。

转义值：

将索引值转换为字符串，使用格式化函数(http://lesscss.org/functions/#string-functions--format),
使用替换函数 (http://lesscss.org/functions/#string-functions-replace),
在通过转义函数 (http://lesscss.org/functions/#string-functions-e) 传递值以去除引号后赋值。

<style type="text/less">
div {
  margin: 0;
  border: 1px solid black;
  background: white;
  color: black;
}

@loop-margin-top: 1;
.loop-margin-top (@i) when (@i >= -1) {
   @escapedValue: e(replace(%("%s", @i), "\.", "-", "g"));
   .margin-top-@{escapedValue} {
       margin-top: ~"@{i}rem";
   }
   .loop-margin-top(@i - 0.5);
}
.loop-margin-top (@loop-margin-top);
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.12.2/less.min.js"></script>

<div class="margin-top-1">
1
</div>

<div class="margin-top-0-5">
0.5
</div>

<div class="margin-top-0">
0
</div>

<div class="margin-top--0-5">
-0.5
</div>

<div class="margin-top--1">
-1
</div>

如何使用@loop 在 LESS 中创建类数组

How do I create array of classes in LESS with @loop

loops

less

如何使用@loop 在 LESS 中创建 类 数组

How do I create array of classes in LESS with @loop

loops

less

如何使用@loop 在 LESS 中创建类数组