less注意点小记

1、运算符+不能当成字符串连接符使用

.bg-image{
    background-image: url(@url + "@2x.png");
    ...
} 
复制代码

上述使用会报错，正确用法如下：

.bg-image{
    background-image: url('@{url}@2x.png'); 
    ...
} 
复制代码

其中使用到less中的变量插值来对变量和字符串的连接，运算符+只是单纯的加的运算。

2、@import引入路径中为什么使用波浪号~

引用示例: @import "~common/less/mixin.less";不这样引用会报错如下：

~ 是 less-loader 到东东，参考 www.npmjs.com/package/les…

参考链接：

• segmentfault.com/q/101000001…
• coding.imooc.com/learn/quest…

3、使用上述.bg-image报错找不到图片，使用如下

.logo{
    display: inline-block;
    vertical-align: middle;
    .bg-image('logo');
} 
复制代码

报错如下所示：

还是路径问题，修改成如下即可:

.bg-image{
    background-image: ~"url(@url + "@2x.png")";
    ...
} 
复制代码

参考链接：

• www.imooc.com/wenda/detai…