Calc（）如何在css中计算？

Question

有人可以描述在css中使用Calc()吗？ 什么是~符号与Calc()的含义？

以下代码如何计算？

calc(~'(100% - 4 * 23.233%) / 3')

Answer 1

这不是普通CSS中的有效值。

它看起来像是来自LESS source code，它被编译成以下内容：

calc((100% - 4 * 23.233%) / 3);

正如relevant LESS documentation所述，~''用于转义：

  

Escaping允许您使用任意字符串作为属性或变量值。 ~"anything"或~'anything'内的任何内容均按原样使用，除interpolation外无其他任何更改。

这样做是为了防止LESS自动将表达式计算为数学。如果没有转义，则会对值进行评估并编译为：

calc(2.3559999999999994%);

如需进一步参考，请参阅此相关问题：＆＃34; Less Aggressive Compilation with CSS3 calc＆＃34;。