在 LESS css 中增加一个变量

如何在 LESS css 中增加变量？

这是例子..

@counter: 1;
.someSelector("nameOfClass", @counter);
@counter: @counter + 1;
.someSelector("nameOfClass", @counter);

上面的代码片段会导致这个“语法错误”

SyntaxError: Recursive variable definition for @counter

有解决此错误的方法吗？例如是否有像@counter++这样的符号？

Thanks..

绝对不可能

See 有关 LESS 变量的文档。本质上，LESS 变量是其创建范围内的常量。它们是延迟加载的，并且不能以这种方式“更改”。最后一个定义将用于该范围内的所有定义。在您的情况下，将会发生错误，因为变量无法引用自身。

考虑这个例子：

@counter: 1;
.someSelector("nameOfClass", @counter);
@counter: 2;
.someSelector("nameOfClass1", @counter);

.someSelector(@name; @count) {
  @className: ~"@{name}";
  .@{className} {
  test: @count;
  }
}

输出将是2对彼此而言：

.nameOfClass {
  test: 2;
}
.nameOfClass1 {
  test: 2;
}

这是因为 LESS 定义了@counter与该范围内变量的最后一个定义。它不注意order使用的调用@counter，但其行为与 CSS 非常相似，并考虑了变量的“级联”。

要在 LESS 中对此进行进一步讨论，您可以跟踪发生在这个 LESS 功能请求.

解决方案是局部变量的递归调用设置器

最多七相linked他认为 LESS 中有一个错误，但我认为事实并非如此。相反，在我看来，这是一种创造性地使用递归重置计数器来获得所需的效果。这使您可以实现您想要的目标（使用我的示例代码）：

// counter

.init() {
  .inc-impl(1); // set initial value
} .init();

.inc-impl(@new) {
  .redefine() {
    @counter: @new;
  }
}

.someSelector(@name) {
  .redefine(); // this sets the value of counter for this call only
  .inc-impl((@counter + 1)); // this sets the value of counter for the next call
  @className: ~"@{name}";
  .@{className} {
    test: @counter;
  }
}

.someSelector("nameOfClass");
.someSelector("nameOfClass1");

这是 CSS 输出：

.nameOfClass {
  test: 1;
}
.nameOfClass1 {
  test: 2;
}

NOTE:我相信您在这里并不是严格更改全局值，而是在每次调用时设置一个新的本地值.someSelector。这是否基于错误行为值得怀疑，但如果是这样，这个解决方案将来可能会消失。 有关此方法的局限性的进一步评论，请参阅此处的讨论.