基于LESS中类名的动态列

Question

我正在尝试做这样的事情

            .col-@{index} {
                width: @col-n-width;
                left: {index - 1 } * @col-n-width;
            }

但不确定如何访问里面的{index}变量。这甚至可能吗？

Answer 1

仅当您需要在属性名称或选择器或URL等中插入变量时才使用@{}语法。当您需要做的只是简单的数学运算时，不需要这样做。只需将其引用为@index，如下例所示。

.col-@{index} {
  width: @col-n-width;
  left: (@index - 1) * @col-n-width;
}

例如，如果您正在尝试编写循环/ mixin，代码将如下所示：

@col-n-width: 200px;

.create-cols(@index) when (@index > 0) {
  .col-@{index} {
    width: @col-n-width;
    left: (@index - 1) * @col-n-width;
  }
  .create-cols(@index - 1);
}
.create-cols(5);

注意： @index必须是Less文件中定义的变量。较少的编译器无法读取HTML并基于它动态创建类。在最坏的情况下，您至少必须使用less.modifyVars()但client-side compilation of code is generally not recommended通过JS进行客户端编译。