如何使用循环生成CSS少

我不太熟悉Less。在我的理解中，我认为Less可以将较少的格式文件转换为标准的css文件(如果我错了，请更正我)。现在我有一个问题在下面。

假设您将在单个CSS文件中生成100个CSS类，如下所示(从.span1到.span100)。我想知道是否能够生成像这样的CSS文件？

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

.span4 {
  width: 4%;
}

.span3 {
  width: 3%;
}

.span2 {
  width: 2%;
}

.span1 {
  width: 1%;
}

解决方法

如果您使用最新版本的LESS，请尝试：

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

编辑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%;
}

参数说明

> @n：integer，迭代次数。
> @ base-value(可选)：integer，要分配给该属性的循环的起始值。默认值是为迭代次数分配的值@n。
> @unit(可选)：string，属性的单位。默认值为px。
> @property(可选)：非字符串或字符串CSS属性。默认值为width
> @selector(可选)：转义字符串，用于循环的选择器。只要它作为转义的字符串传入，就可以是任何东西。
> @ step-size(可选)：integer，循环递增的值。

笔记

注1：自定义选择器作为转义字符串传入。如果没有逃脱，就不会像预期的那样工作。

注2：通过明确使用参数名称来调用mixin。这有一些优点和缺点：

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

优点

清楚的是什么参数被调用
>您不必依赖于参数的顺序，并记住哪个参数来自第一，第二，…

缺点

>我想看起来有点丑陋吗？>(添加到列表和/或更改实现，如果你知道更好的一个)

如何使用循环生成CSS少

解决方法

相关文章