码迷,mamicode.com
首页 > 其他好文 > 详细

less变量插值

时间:2017-07-27 10:48:06      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:拼接字符串   image   https   http   失败   提高   span   base   可扩展   

  在使用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

less变量插值

标签:拼接字符串   image   https   http   失败   提高   span   base   可扩展   

原文地址:http://www.cnblogs.com/zhuzhenwei918/p/7243264.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!