如何在less中使用循环生成CSS

Question

我不熟悉Less。在我的理解中，我认为Less可以将less格式文件转换为标准的css文件（如果我错了，请纠正我）。现在我有一个问题。

假设您要在单个CSS文件中生成100个CSS类，如下所示（从.span1到.span100）。 我想知道less是否可以生成这样的CSS文件？

...
.span5 {
  width: 5%;
}

.span4 {
  width: 4%;
}

.span3 {
  width: 3%;
}

.span2 {
  width: 2%;
}

.span1 {
  width: 1%;
}

- Joe.wang

---

这是一个完全合理的问题，也正是我所提出的。请重新打开这个问题。 - anushr

Answer 1

更新，2022年3月28日：

需要使用Less v3.9.0

each(range(1%, 100%, 1), {
  .span-@{index} {
    width: @value;
  }
});

输出

.span-1 {
  width: 1%;
}
.span-2 {
  width: 2%;
}
.span-3 {
  width: 3%;
}
.
.
.
.span-98 {
  width: 98%;
}
.span-99 {
  width: 99%;
}
.span-100 {
  width: 100%;
}

引用文档：docs：

使用range和each创建一个for循环

需要Less v3.9.0

你可以通过生成数字列表并使用each将其扩展到规则集来模拟for循环。

注意事项：

• range(1%, 100%, 1)：从1%到100%创建一个步长为1的列表，即：

  1% 2% 3% ... 100%

• each(list, rules)：将规则集的计算绑定到列表的每个成员上。

  • @value：列表中的每个值，即1%，2%，...
  • @index：每个值的索引，从1开始（数值位置，从1开始）

原始答案：

尝试这个：

@iterations: 5;
.span-loop (@i) when (@i > 0) {
    .span-@{i} {
        width: ~"@{i}%";
    }
    .span-loop(@i - 1);
}
.span-loop (@iterations);

输出：

.span-5 {
  width: 5%;
}
.span-4 {
  width: 4%;
}
.span-3 {
  width: 3%;
}
.span-2 {
  width: 2%;
}
.span-1 {
  width: 1%;
}

你可以在less2css上尝试它。

更新，2014年4月3日

这里有一个更灵活的版本，提供了更多选项：

.custom-loop( @base-value:@n ; @n ; @unit : px; @j : 1 ;@_s:0 ; @step-size:1  ; @selector:~".span-"; @property : width)
when not(@n=0)  {
  
  @size : @base-value+@_s;
  @{selector}@{j}{
    @{property} : ~"@{size}@{unit}";
  }
  .custom-loop(@base-value ,  (@n - 1), @unit , (@j + 1) ,  (@_s+@step-size) , @step-size,  @selector, @property);
}

您可以仅使用必需参数@n来调用此函数：

.custom-loop(@n:3);

这将输出：

.span-1 {
  width: 3px;
}
.span-2 {
  width: 4px;
}
.span-3 {
  width: 5px;
}

但是如果你想要控制每个参数，以下是使用所有自定义参数的示例：

.custom-loop( @n: 3 , @base-value:1, @unit: '%', @property:font-size, @selector: ~".fs-", @step-size: 2);

这将输出：

.fs-1 {
  font-size: 1%;
}
.fs-2 {
  font-size: 3%;
}
.fs-3 {
  font-size: 5%;
}

参数描述

1. @n : 整数，迭代次数。

2. @base-value（可选）： 整数，用于指定循环赋值给属性的起始值。默认值与迭代次数@n相同。

3. @unit（可选）： 字符串，属性的单位。默认值为px。

4. @property（可选）： 非字符串或字符串，CSS属性。默认值为width

5. @selector（可选）： 转义字符串，用于循环的选择器。只要传递为转义字符串即可使用任何内容。

6. @step-size（可选）： 整数，循环递增的值。

注意事项

Note 1: 自定义选择器作为一个转义字符串传递。如果未经转义，则不会按预期工作。

Note 2: 调用mixin时需要显式使用参数名称。这有一些优点和缺点：

Note 3: 单位以字符串形式传递。

优点

1. 清楚指定了调用的参数
2. 您不必依赖参数的顺序，并记住哪个参数是第一个，第二个...

缺点

1. 可能看起来有点丑？
2. (如果您知道更好的方法，请增加到该列表并/或更改实现)

- AJ Meyghani

---

只有这种语法可以与less.php（leafo）一起使用，谢谢！ - nicolast

一个小的批评。我更喜欢使用@j:@base-value和(@j+@step-size)，这样我就可以得到有意义的类名，而不是没有上下文的索引。在你的解决方案中，当base-value != step-size != 1时，类名与属性中设置的值不匹配。 - activedecay

你是个神啊兄弟。 - myworldbox

Answer 2

大家好，我找到了一种循环输出css的方法，请审核一下。谢谢。

@iterations: 100;

// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loopingClass (@index) when (@index > 0) {

    // create the actual css selector, example will result in
    // .myclass_30, .myclass_28, .... , .myclass_1
    (~".span@{index}") {
        // your resulting css
        width: percentage((@index - 1) *0.01);
    }

    // next iteration
    .loopingClass(@index - 1);
}

// end the loop when index is 0
.loopingClass (0) {}

// "call" the loopingClass the first time with highest value
.loopingClass (@iterations);

- Joe.wang

---

请参考Bootstrap的Less源代码（即mixins.less）。搜索“.spanX”字符串，希望它紧挨着您要找到的内容。 - menjaraz

你可以像Bootstrap的作者一样，使用守卫和递归mixin。 - menjaraz

请前往此帖子：使用LESS css进行循环。 - menjaraz

@Joe.wang的代码在less2css.org上无法工作。所以我做了下面这个修改：@iterations: 100;.loopingClass (@index) when (@index > 0) { .span@{index} { width: percentage((@index ) *0.01); } .loopingClass(@index - 5); }.loopingClass (0) {}.loopingClass (@iterations); - Satya Prakash

Answer 3

请注意，自3.7版本起，Less拥有一个each()函数，可以轻松与range()函数配合使用以生成所需的代码-如下所示：

each(range(100),{
    .span@{value} { width: @value * 1%; }
});

- Lux Logica

Answer 4

在给定的方法内是不可能完成的。

但是可能会像这样：

但是可能会像这样：

.loopingClass (@index) when (@index > 0){
  .span_@{index}{
    width: @index px;
  }
  .loopingClass(@index - 1);
}
.loopingClass(5);

结果将会是这样的：

.span_100 {
  width: 100 px;
}
.span_99 {
  width: 99 px;
}
.span_98 {
  width: 98 px;
}
.span_97 {
  width: 97 px;
}
.span_96 {
  width: 96 px;
}
.span_95 {
  width: 95 px;
}

and e.t.c.

- FlamesoFF

---

请在代码或fiddle中添加答案。代码中的图片被认为是不好的。 - Miller

这个答案不是和@Amin的答案重复了吗？ - seven-phases-max