css - 在 LESS css 中增加一个变量

Question

如何在 LESS css 中增加一个变量？

这是例子..

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

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

SyntaxError: Recursive variable definition for @counter

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

谢谢..

Answer 1

绝对不可能

参见 the documentation on LESS variables .本质上，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。它不关注使用 @counter 的调用的顺序，而是更像 CSS 并考虑变量的“级联”。

要在 LESS 中对此进行进一步讨论，您可以跟踪发生在 this LESS feature request 上的讨论。 .

解决方案是局部变量的递归调用 setter

最大七相 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;
}

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