LESS是否可以操作CSS变量？

Question

通过使用预处理器变量，很容易设置一个变量并操纵它，以便我可以使用它来设置多个属性。（演示）

在尝试使用原生 CSS 变量时，我注意到我可以将它们与预处理器变量结合使用，在以下示例中：（请使用火狐浏览器）

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

line-height 属性在 40px 时显示正确。

但是，当我尝试操纵预处理器变量 - 像这样：

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

......代码运行失败了。

这有什么可能解决的方法吗？

- Danield

---

如果我没错的话，var(--length) 在 Less 编译器将代码编译成 CSS 之后由 UA 解析为其值。在编译时，@length 的值只是 var(--length)，它不是一个数字，因此会导致编译错误。尝试这样做：@length2: @length ~"* 2"; 然后看看是否有效。我无法测试，因为我的浏览器版本较旧。或者可以尝试这样做：@length2: ~"calc(@{length} * 2)";。 - Harry

@Harry - 结果是填充值为：var(--length) * 2; - Danield

用calc()包装起来？虽然这只是猜测。您能否在不使用预处理器的情况下对CSS变量应用数学运算？ - Harry

@Harry - 是的，那个可行！请把它作为答案添加，以便我接受。 - Danield

Answer 1

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

对于编译器而言，“@length”的值仅为“var（--length）”。由于这不是数字，在编译过程中会抛出错误，表示正在对无效类型进行数学运算。

修复此问题的一种方法是使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;
}

上述代码编译后会产生与规范示例11类似的输出，因此这应该是一个相当不错的方法 :)

... 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...

- Harry