Question

使用预处理器变量，可以轻松设置一个变量并对其进行操作，以便我可以使用它来设置多个属性。（demo）

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

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

行高已正确呈现为40px

但是，当我试图操纵预处理器变量 - 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：对第4行第3列上无效类型的操作：

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

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

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（）函数在计算值时间...
被替换

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

1 个答案: