Vue项目使用less和css3的calc时计算错误问题解决方案。

起因：

项目开发过程中，需要计算一个div版块的高度为100% - 0.48rem，于是很自然的想到了：

    .content {
      height: calc(100% - 0.48rem);
      overflow: scroll;
      word-wrap: break-word;
      word-break: normal;
    }

打开控制台查看代码效果，却发现 高度和我预想的不对。而且99.52%这个数字似乎很眼熟，看了半天才发现99.52 = 100 - 0.48
显然，这个计算结果错得很远。

分析：

上网找了半天资料，才发现是因为less引起的。
less的计算方式跟calc方法有重叠：
在less中，calc(100% - 0.48rem)等带单位混合运算在less解析时，会被忽略单位，全部按照百分比计算，calc(100% - 0.48rem)就会被less编译成calc(99.52%);

解决办法：

下面两种写法都可以。

      .content {
        height:e("calc(100% - 0.48rem)");
        overflow: scroll;
        word-wrap: break-word;
        word-break: normal;
      }
      .content {
        height: calc(~'100% - 0.48rem');
        overflow: scroll;
        word-wrap: break-word;
        word-break: normal;
      }

第一种方法这个 e(calc("")) 我找了半天也没找到文档，不知道有没有大侠路过告知一下，为什么这样也可行。
第二种方法是应用了less的转义