css - 如何在 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%;
}

Answer 1

更新，2022 年 3 月 28 日:

需要较少的 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 :

Creating a for loop using range and each

Requires Less v3.9.0

You can emulate a for loop simply by generating a numerical list and using each to expand it to a ruleset.

注意事项:

• range(1%, 100%, 1):做一个从1%到100%的list，step值为1，即:

  1% 2% 3% ... 100%

• each(list, rules):将规则集的评估绑定(bind)到列表的每个成员。

  • @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 : integer, 迭代次数。

2. @base-value(可选):整数，要分配给属性的循环起始值。默认值与为迭代次数分配的值相同@n。

3. @unit(可选):string，属性的单位。默认值为 px。

4. @property(可选):非字符串 或字符串 CSS 属性。默认值为 width

5. @selector(可选):转义字符串，用于循环的选择器。可以是任何东西，只要它作为转义字符串传入即可。

6. @step-size(可选):整数，循环递增的值。

注意事项

注意 1: 自定义选择器作为转义字符串传入。如果它没有被转义，它就不会按预期工作。

注意 2: 通过显式使用参数名称调用 mixin。这有一些优点和缺点:

注意3:单位以字符串形式传入。

优势

1. 调用什么参数一目了然
2. 您不必依赖参数的顺序并记住哪个参数排在第一位、第二位、……

缺点

1. 我猜它看起来有点丑？
2. (添加到列表和/或更改实现，如果您知道更好的实现)