如何在CSS中使用Calc()计算？

Question

4

有人能描述一下 CSS 中 Calc() 的使用吗？
还有，Calc() 中的 ~ 符号是什么意思？
以下代码如何计算？

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

- Dipesh Rangani

1

那是[一般同级选择器]。你不能那样使用它，它是无效的，除非你正在使用某些预处理器。 - pol

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

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

看起来这是来自LESS源代码，编译后变成了以下内容：

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

根据相关的LESS文档所述，~'' 用于转义：

转义允许您将任意字符串用作属性或变量值。在 ~"anything" 或 ~'anything' 中的任何内容都会原样使用，除了插值之外不做任何更改。

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

calc(2.3559999999999994%);