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

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

虽然与native css variables实验，我发现，我可以将它们与预处理程序变量组合在一起，所以在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; 
}

...代码失败。

这可能不知？

来源

2016-03-01 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

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

对于编译器，@length的值仅为var(--length)。由于这不是一个数字，因此在编译过程中会引发错误，指出正在对无效类型执行数学运算。来解决这个

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

的一种方法将是使欠编译器输出的变量名，因为它是和具有附加到它的乘数（像字符串连接）。然后这将把控制权交给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输出，所以它应该是这样做的合理的好方法:)

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

来源

2016-03-01 13:34:27 Harry

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

回答

相关问题