为什么CSS中的calc函数可能会不生效？( 二 ) _生活百科

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation 。

我们希望less不要帮我们处理，所以这里我们可以使用less的转义语法让calc函数原样输出就好了
.box {width: calc(~"100% - 50px")}

升级less和less-loader

了解calc函数

CSS calc 函数用于在指定 CSS 属性值时执行计算。它可以用于可以使用任何数值的地方。它将表达式作为参数，并将结果用作使用它的 CSS 属性的值。我们可以用它进行加法+、减法-、乘法*和除法/ 。

语法/* property: calc(expression) */width: calc(100% - 80px);calc() 函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。

+ 加法
- 减法
* 乘法，乘数中至少有一个是 number
/ 除法，除数必须是number

规则

+ 和 - 运算符的两边必须要有空白字符。比如， calc(50% -8px) 会被解析成为一个无效的表达式，解析结果是：一个百分比后跟一个负数长度值。而加有空白字符的、有效的表达式 calc(8px + -50%) 会被解析成为：一个长度后跟一个加号再跟一个负百分比。
* 和 / 这两个运算符前后不需要空白字符，但如果考虑到统一性，仍然推荐加上空白符。
用 0 作除数会使 HTML 解析器抛出异常。
涉及自动布局和固定布局的表格中的表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式， auto 可视为已指定。
calc() 函数支持嵌套，但支持的方式是：把被嵌套的 calc() 函数全当成普通的括号。

解惑想要了解前面那些坑产生的原因，我们得先了解CSS中的基础语法与数据类型：
DIMENSION语法DIMENSION{num}{ident}

文章插图
这里的num值的是数字，那么ident代表什么呢，这个我们也可以在CSS规范中找到答案
identident[-]?{nmstart}{nmchar}*nmstart和nmcharnmstart [_a-z]|{nonascii}|{escape}nmchar [_a-z0-9-]|{nonascii}|{escape}