是否可以使用 LESS 操作 css 变量？

Question

使用预处理器变量可以很容易地设置一个变量并对其进行操作，以便我可以使用它来设置多个属性。 (demo)

在试验 native css variables, I noticed that I could combine them with preprocessor variables, so in the following example 时：（使用 firefox）

h1 {
  --length: 40px;
  @length: var(--length);
  line-height: @length;
  border: 5px solid tomato;
}

行高已正确呈现为 40 像素

但是，当我试图操纵预处理器变量时 - like this:

h1 {
  --length: 40px;
  @length: var(--length);
  @length2: @length*2;
  line-height: @length;
  padding: @length2;
  border: 5px solid tomato;
}

...代码失败。

这有可能吗？

Answer 1

正如我评论中提到的，我对CSS变量的理解是，变量被UA解析为它的实际值。这发生在 Less 编译器编译文件之后，因此它不知道 CSS 变量包含的实际值是什么。

对于编译器来说，@length的值只是var(--length)。由于这不是一个数字，编译期间会抛出一个错误，表明正在对无效类型进行数学运算。

OperationError: Operation on an invalid type on line 4, column 3:

解决此问题的一种方法是让 Less 编译器按原样输出变量名，并在其后附加乘数（如字符串连接）。然后，这会将控制权交给用户代理。

但是由于所有 CSS 数学运算都必须在 calc() 函数中给出，所以整个事情都必须包含在其中。所以，下面的代码可以正常工作。

h1 {
  --length: 40px;
  @length: var(--length);
  @length2: ~"calc(@{length} * 2)";
  line-height: @length;
  padding: @length2;
  border: 5px solid tomato;
}

或者，如果在编译期间启用了 --strict-math，即使下面的内容也足够了：

h1 {
  --length: 40px;
  @length: var(--length);
  @length2: calc(@length * 2);
  line-height: @length;
  padding: @length2;
  border: 5px solid tomato;
}

上面的代码在编译时会产生类似于 Example 11 of the specs 中的输出，因此这应该是一种相当好的执行此操作的方法:)

... Note, though, that calc() can be used to validly achieve the same thing, like so:
.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}
var() functions are substituted at computed-value time...

是否可以使用 LESS 操作 css 变量？

Is it possible to manipulate css variables using LESS?

less

css-variables