在LESS css中增加一个变量 [英] Increment a variable in LESS css

问题描述

如何在LESS css中增加变量？

How Can I increment a variable in LESS css?

以下是示例..

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

上述代码段将导致语法错误

The above code snippet will cause this "Syntax Error"

SyntaxError: Recursive variable definition for @counter

有这个错误的工作吗？例如，有一个像@ counter ++的符号？

Is there a work around for this error? For example is there a notation like @counter++ ?

谢谢..

推荐答案

不可能的

查看 LESS变量的文档。本质上，LESS变量是它们创建范围内的常量。他们是懒惰加载，不能以这种方式改变。最后一个定义将是那个范围中所有的定义。

Not Strictly Possible

See the documentation on LESS variables. Essentially, LESS variables are constants in the scope of their creation. They are lazy loaded, and cannot be "changed" in that way. The very last definition will be the one used for all in that scope. In your case an error will occur, because variables cannot reference themselves.

考虑这个例子：

@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，并采取变量的级联

This is because LESS defines the @counter with the last definition of the variable in that scope. It does not pay attention to the order of the calls using @counter, but rather acts much like CSS and takes the "cascade" of the variable into consideration.

有关LESS中的进一步讨论，您可以跟踪发生在此LESS功能请求。

For further discussion of this in LESS, you might track discussion that occurs on this LESS feature request.

七相最大值链接他认为是LESS中的一个错误，但我不认为它是。相反，在我看来，是创造性地使用递归计数器的重置以获得所需的效果。这使得你可以实现你想要的（使用我的示例代码）：

Seven-phases-max linked to what he believes to be a bug in LESS, but I don't think it is. Rather, it appears to me to be a creative use of recursive resetting of the counter to get the effect desired. This allows for you to achieve what you desire like so (using my example code):

// 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 时设置一个新的局部值。这是否是基于错误的行为是否是可疑的，但如果是这样，这个解决方案可能会在将来消失。
有关此方法的限制的进一步意见，请参阅此处的讨论。

NOTE: I believe you are not strictly changing a global value here, but rather setting a new local value with each call to .someSelector. Whether this is based on buggy behavior or not is questionable, but if so, this solution may disappear in the future. For further comments of the limitations of this method, see the discussion here.

这篇关于在LESS css中增加一个变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！