less变量插值 - 爱码网

　　在使用less的过程中，我在background的中引用图片路径，希望先确定一个baseurl，然后再在url中使用拼接字符串的方式拼接，尝试多次，失败。实际上less的变量插值是有自己的一套规则的，如下：

先在less文件顶部声明 @picturePath，这样当文件路径发生变化的时候就只需要修改 @picturePath，而不需要在文件中一个一个的修改，大大提高了可扩展性。

@picturePath: '../../../www/images/';

然后使用如下的方式使用url：

span.emoji {
                    background: url("@{picturePath}emoji.png");
                    &:hover {
                        background: url("@{picturePath}emoji-active.png");
                    }
                }
                span.picture {
                    background: url("@{picturePath}picture.png");
                    background-size: 32px 32px;
                    &:hover {
                        background: url("@{picturePath}picture-active.png");
                        background-size: 32px 32px;
                    }
                }

即将@后面的变量使用{}括起来，然后整体使用""包裹即可。这样，我们写好了这个路径即使路径变化也不用一个一个的去修改他们。

参考文章： https://ask.helplib.com/503630