3

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

在尝试使用原生 css 变量时，我注意到我可以将它们与预处理器变量结合起来，因此在以下示例中：（使用 firefox）

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;
}

...代码失败。

这有可能吗？

4

1 回答 1

3

正如我在评论中提到的，我对 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;
}

上面的代码在编译时会产生类似于规范示例 11 中的输出，因此它应该是一种相当好的方法：）

...但是请注意，这calc()可以用来有效地实现相同的目标，如下所示：

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

var() 函数在计算值时间被替换......

于 2016-03-01T13:34:27.080 回答