让Less不进行计算/编译的方法

Less 很好很强大，极大的提高的写 CSS 的便利性。但在有些情况下我们并不需要其的编译，比如我们想写如下的样式

/* less */
#app {
  height: calc(100vh - 40px);
}

经过 Less 的编译，最后呈现出来的样式是

/* css */
#app {
  height: calc(60vh);
}

Less 帮我们进行了数值计算，并保留了前者的单位 vh。

那么我们如何避免属性被编译，保留原格式呢？

官方提供了 Escaping 的特性，将属性当字符串用引号括起来，并在前面加上波浪符 ~，修改后的写法如下：

/* less */
#app {
  height: ~"calc(100vh - 40px)";
}