44

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

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

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

.span4 {
  width: 4%;
}

.span3 {
  width: 3%;
}

.span2 {
  width: 2%;
}

.span1 {
  width: 1%;
}
4

4 回答 4

59

试试这个：

@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);
}

您只能通过@nwhich 是必需的参数来调用它：

.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 (可选): string , 属性的单位。默认值为px。

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

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

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

笔记

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

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

注 3：单位作为字符串传入。

好处

  1. 调用什么参数一目了然
  2. 您不必依赖参数的顺序并记住哪个参数先出现，第二个，......</li>

缺点

  1. 我想它看起来有点丑？
  2. （如果您知道更好的实现，请添加到列表和/或更改实现）
于 2014-01-18T01:54:11.143 回答
23

所有，我找到了一种循环输出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);
于 2013-03-06T08:21:02.737 回答
11

请注意，自 3.7 版以来，Less 有一个each()函数，可以很容易地与该range()函数一起使用以生成所需的代码 - 如下所示：

each(range(100),{
    .span@{value} { width: @value * 1%; }
});
于 2020-03-27T00:55:36.597 回答
1

在给定的方法内是不可能做到的。

但可能是这样的：

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

Resilt 将是这样的：

.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.
于 2014-02-19T12:51:02.013 回答