习惯用Less之后，简直一点都不想再乖乖地写CSS了。光是“嵌套”的语法特性就让人爱不释手。
问题
不过我发现在 Less 中使用 CSS3 的calc函数（有时候很有用），怎么都不起作用。比如 Less 中：
width:calc(100% + 50px);
但编译后的CSS结果却是：
width:calc(150%);
解决方法
一查才知道，原来是跟 Less 的语法冲突了，Less 把calc的参数当作运算式执行了。解决方式是使用 Less 的转义字符~。它的具体用法可以看文章结尾的参考阅读中的 Less Language Escaping。文档中说到：
Escaping allows you to use any arbitrary string as property or variable value. It can be used also to dynamically build selectors, but that feature is deprecated and replaced by different more powerful option.
所以正确的解决写法是：
width:calc(~"100% + 50px");
另外，如果要使用 Less 中的变量，两种写法如下：
@extra:50px;
width:calc(~"100% + @{extra}");
@extra:50px;
width:calc(~"100% +"(@extra)); //变量外一定要加括号，结果中会自动添加空格
编译后的 CSS：
width:calc(100% + 50px");
再复杂一点：
@extra:50px;
width:calc(~"100% + @{extra} + 2em");
@extra:50px;
width:calc(~"100% +"(@extra)~"+ 2em");
编译后的 CSS：
width:calc(100% + 50px + 2em");
顺便提一下，如果习惯使用 Less 语法，但是又不想在 HTML 中引入Less.js等其他的库，可以使用编辑器的插件，把 Less 文件编译成 CSS 文件之后，再引入到 HTML 中。比如，VSCode 有一个插件叫 Easy LESS。每当 Less 文件被保存时，就会自动编译生成对应的 CSS 文件。
Easy LESS
参考阅读
- css3中calc在less编译时被计算的解决办法： http://blog.csdn.net/playboyanta123/article/details/50408335
- Disable LESS-CSS Overwriting calc() [duplicate]： https://stackoverflow.com/questions/17904088/disable-less-css-overwriting-calc
- Less Language Escaping： https://github.com/SomMeri/less4j/wiki/Less-Language-Escaping
网友评论