在 Less 循环中构建重复选择器答案

【问题标题】：Build a repetitive selector within a Less loop在 Less 循环中构建重复选择器
【发布时间】：2023-03-12 15:12:08
【问题描述】：

我在 LESS 中看到了各种循环方式，但我还没有找到构建选择器的方法（我猜凝集是正确的术语）。

例如，我想要这样的东西：

.staticClass .repeatedClass .repeatedClass > .finalStaticClass{
    height: 20px;
}

.repeatedClass 将根据循环计数生成。 .staticClass 和 .finalStaticClass 将（顾名思义）是静态的。

此外，height 属性将在每个循环计数中增加 10（或任何给定数字）。

【问题讨论】：

标签： css less

【解决方案1】：

我会以这种方式去做：

.generateClasses (@index, @n, @in:"") when (@index > 0) {
    @concatenate: "@{in} .repeatedClass";
    @selector: ~".staticClass @{concatenate} > .finalStaticClass";
    @{selector}{ height: unit(@n,px) };
    .generateClasses((@index - 1), (unit(@n) + 10), @concatenate);
}
.generateClasses(0, @n, @in){};

.generateClasses(4, 10px);

您将连接生成的类传递到下一个循环，并且每次添加另一个类。 @index 是循环的计数器，@n 是您要增加的值。

CSS 输出：

.staticClass  .repeatedClass > .finalStaticClass {
  height: 10px;
}
.staticClass  .repeatedClass .repeatedClass > .finalStaticClass {
  height: 20px;
}
.staticClass  .repeatedClass .repeatedClass .repeatedClass > .finalStaticClass {
  height: 30px;
}
.staticClass  .repeatedClass .repeatedClass .repeatedClass .repeatedClass > .finalStaticClass {
  height: 40px;
}

编辑 - 对于旧版本的 Less：

在 Less .test），以限制变量。然后你可以遍历这个，按照这些思路做一些事情：

.generateClasses (@index, @n, @in:"") when (@index > 0) {
    @concatenate: "@{in} .repeatedClass";
    @selector: ~".staticClass @{concatenate} > .finalStaticClass";
    .generateClasses((@index - 1), (unit(@n) + 10), @concatenate);
}
.generateClasses(0, @n, @in){};

.test(@i, @ni){
    .generateClasses(@i,@ni);
    @{selector} {
        height: @ni;
    }
}

.printClasses(@i:1,@ni:10px) when (@i > 0) {
    .test(@i,@ni*@i);
    .printClasses(@i - 1,@ni);
}

.printClasses(4);

现在的输出 CSS 将是：

.staticClass  .repeatedClass .repeatedClass .repeatedClass .repeatedClass > .finalStaticClass {
  height: 40px;
}
.staticClass  .repeatedClass .repeatedClass .repeatedClass > .finalStaticClass {
  height: 30px;
}
.staticClass  .repeatedClass .repeatedClass > .finalStaticClass {
  height: 20px;
}
.staticClass  .repeatedClass > .finalStaticClass {
  height: 10px;
}

如果你只需要一次生成一个选择器，你可以跳过第二个循环，只要在你需要的地方调用.test() mixin。

【讨论】：

嘿，尝试了您的方法，但我的输出与您的不同。例如，在编译“.generateClasses(4, 10px);”时，我得到以下信息： .staticClass .repeatedClass .repeatedClass .repeatedClass .repeatedClass > .finalStaticClass { height: 10px; } .staticClass .repeatedClass .repeatedClass .repeatedClass .repeatedClass > .finalStaticClass { 高度：20px; } .staticClass .repeatedClass .repeatedClass .repeatedClass .repeatedClass > .finalStaticClass { 高度：30px; } .staticClass .repeatedClass .repeatedClass .repeatedClass .repeatedClass > .finalStaticClass { 高度：40px; }
问题是变量泄漏超出了它们的作用域，这已经在 Less >= 1.4.0 中得到解决。检查您是否正在运行最新版本的 Less。
我为旧版本的 Less 添加了一个解决方案。
一大堆课程正在进行中！不错的解决方案，+1。

【解决方案2】：

正确的解决方案是：

.staticClass {
    .loop(5);
    .loop(@n, @i: 1) when (@i <= @n) {
        .repeatedClass {
            > .finalStaticClass {
                height: 10px * @i;
            }
            .loop(@n, @i + 1);
        }
    }
}

Demo。

【讨论】：