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

【问题标题】：Is it possible to manipulate css variables using LESS?是否可以使用 LESS 操作 css 变量？
【发布时间】：2016-06-13 21:56:22
【问题描述】：

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

在尝试native css variables 时，我注意到我可以将它们与预处理器变量结合起来，所以在the following example 中：（使用 firefox）

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

line-height 正确渲染为 40px

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

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

...代码失败。

这有可能吗？

【问题讨论】：

如果我没记错的话 var(--length) 被 UA 解析为它的值，这是在 Less 编译器将代码编译成 CSS 之后。在编译时，@length 的值只有var(--length)，它不是一个数字，因此会导致编译错误。尝试以@length2: @length ~"* 2"; 进行操作，看看它是否有效。我无法测试，因为我的浏览器很旧。甚至@length2: ~"calc(@{length} * 2)";.
@Harry - 结果是填充得到了值：var(--length) * 2;
用calc() 环绕？不过，这两者都只是猜测。您是否能够在不使用预处理器的情况下将数学运算应用于 CSS 变量？
@Harry - 是的，有效！请添加它作为我接受的答案

标签： less css-variables

【解决方案1】：

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

对于编译器来说，@length 的值只有var(--length)。由于这不是数字，因此在编译过程中会引发错误，表明正在对无效类型进行数学运算。

OperationError：对第 4 行第 3 列无效类型的操作：

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

但是由于所有的 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 中的输出，因此它应该是一种相当好的方法:)

...但请注意，calc() 可用于有效地实现相同的目标，如下所示：
.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}
var() 函数在计算值时被替换...

【讨论】：