CSS中的calc函数有时会不生效

项目场景：

当CSS3中新增了calc函数时，面对想要对某一些样式进行动态计算，JavaScript不再是我们的第一选择，我们只用 CSS 就可以进行相当复杂的计算,但在使用期间也会踩不少坑

---

问题描述

css样式没有进行动态计算：
明明些的是：calc(100% - 50px),
编译后得到的却是：calc(50% )
直接：100% - 50px进行了运算

---

原因分析：

问题分析：

1、运算符之间没加空格

/*错误写法*/
div{
      width: calc(100%-50px);
}
/*正确写法*/
div{
      width: calc(100% - 50px);
}

这里错误写法中-两边没加空格，导致width不生效。但并不是所有运算符间都需要加空格，只有 + 和 - 需要加空格，因为运算允许负数的出现，如：

div{
      width: calc(100% + -50px);
}

2、运算值没带单位
3、低版本less处理calc冲突
代码在低版本less中会被编译成你想不到的结果：

.box {
  width: calc(100% - 60px)
}

被编译后

.box {
  width: calc(40%)
}

导致这个结果的原因在于less中有一套自己的运算规则：
less运算（Operations）

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 30mm; // 结果是 8cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 6px - 3cm; // 结果是 5px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。

所以上面的less会被进行如下处理：

由于100%与50px单位不同，会被转换成相同的单位%（以最左侧操作数的单位类型为准）
再进行减法运算得到50%

---

解决方案：

1、符合calc规范
2、（less问题）转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~“anything” 或 ~‘anything’ 形式的内容都将按原样输出，除非 interpolation。

我们希望less不要帮我们处理，所以这里我们可以使用less的转义语法让calc函数原样输出就好了

.box {
  width: calc(~"100% - 60px")
}
或
.box {
  width: ~"calc(100% - 50px)"
}