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

2017-12-28  本文已影响0人  KimYYX

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

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

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

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

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

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

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

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

猜你喜欢

热点阅读