首页 > 代码库 > less变量插值
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
less变量插值
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。