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