css - Calc() 如何在 css 中计算？

Question

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

下面的代码如何计算？

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

Answer 1

这不是纯 CSS 中的有效值。

看起来这是来自LESS 源代码，它被编译成以下内容：

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

如相关 LESS 文档所述，~''用于转义：

转义允许您使用任意字符串作为属性或变量值。里面的任何东西~"anything"or~'anything'都按原样使用，除了插值之外没有任何变化。

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

calc(2.3559999999999994%);

如需进一步参考，请参阅此相关问题：“使用 CSS3 calc 进行较少激进的编译”。