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变量插值的更多相关文章
- 我眼中的 Nginx(三):Nginx 变量和变量插值
张超:又拍云系统开发高级工程师,负责又拍云 CDN 平台相关组件的更新及维护.Github ID: tokers,活跃于 OpenResty 社区和 Nginx 邮件列表等开源社区,专注于服务端技术的 ...
- stylus使用文档总结:选择器+变量+插值+运算符+混合书写+方法
建立好项目后我们来安装stylus npm install stylus stylus-loader --save-dev 这样就安装上了stylus. 接下来就可以使用了,使用方式分两种.一种是在. ...
- sass css样式:@for循环、样式变量与#{} 变量插值
/* sass 可以用写JS的思想来写CSS代码 * #{} 用来插值,大括号中填写需要插入的变量 * @for 变量 from ...
- 你需要知道的Sass插值
你也许会不时地写写 Sass 玩玩,你也会很享受它带给你各种便利.但还有一件事,你并不一定完全了解:插值 (interpolation) - 将一个占位符,替换成一个值.好了,你们都很幸运,因为今天我 ...
- Nginx 变量漫谈(八)
与 $arg_XXX 类似,我们在 (二) 中提到过的内建变量 $cookie_XXX 变量也会在名为 XXX 的 cookie 不存在时返回特殊值“没找到”: location /test ...
- Nginx 变量漫谈(七)
在 (一) 中我们提到过,Nginx 变量的值只有一种类型,那就是字符串,但是变量也有可能压根就不存在有意义的值.没有值的变量也有两种特殊的值:一种是“不合法”(invalid),另一种是“没找到”( ...
- Nginx 变量漫谈(一)
Nginx 的配置文件使用的就是一门微型的编程语言,许多真实世界里的 Nginx 配置文件其实就是一个一个的小程序.当然,是不是“图灵完全的”暂且不论,至少据我观察,它在设计上受 Perl 和 Bou ...
- 细谈sass和less中的变量及其作用域
博客原文地址:Claiyre的个人博客 https://claiyre.github.io/ 博客园地址:http://www.cnblogs.com/nuannuan7362/ 如需转载,请在文章开 ...
- Less变量
Less变量 定义变量 Less 中的变量和其他编程语言一样,可以实现值的复用,同样它也有作用域(scope).简单的讲,变量作用域就是局部变量和全局变量的概念. Less 中,变量作用域采用的是就近 ...
随机推荐
- python 函数星号参数说明
转自: python 函数参数的传递(参数带星号的说明) python中函数参数的传递是通过赋值来传递的.函数参数的使用又有俩个方面值得注意:1.函数参数是如何定义的 2.在调用函数的过程中参数是如何 ...
- IOCP~~
下载源代码 原文网址:http://www.codeproject.com/KB/IP/iocp_server_client.aspx 源码使用了高级的完成端口(IOCP)技术,该技术可以有效地服务于 ...
- Java多线程设计模式(三)
目录(?)[-] Read-Wirte Lock Pattern Thread-Per-Message Pattern Worker Thread Pattern Read-Wirte Lock ...
- CentOS 7.2安装zabbix 3.0 LTS
1.zabbix简介 zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供 ...
- Android-ContentProvider流程
Android-ContentProvider原理及流程 Android为什么设计出一个ContentProvider ? 答:ContentProvider的出现主要是暴露数据出去,暴露什么数据呢 ...
- Linux Guard Service - 守护进程分裂
分裂守护进程 由于fork()后第一行仍然在循环中,使用fork()返回值鉴别当前进程的性质 int i = 0; for (i = 0; i < 10; i++) { // sleep(1); ...
- 只是误以为导入了maven依赖
背景: 之前用Spring Boot 开发了一个小项目,考虑将代码迁到Git服务器,由于之前没用过Git,在将代码正式签入Git服务器前, 我想先签入一个最简单的Spring Boot程序代码作为试验 ...
- Oracle导出导入数据
Oracle数据导入导出imp/exp就相当与oracle数据还原与备份, 利用这个功能你可以构建俩个相同的数据库,一个用来测试,一个用来正式使用. 可以在SQLPLUS.EXE或者DOS(命令行)中 ...
- Android 开发怎样做代码加密或混淆?
欢迎访问网易云社区,了解更多网易技术产品运营经验. 在大公司怎么做android代码混淆的?发现他们的软件用apktool反编译居然没看到classes.dex文件和当前安卓APP加固到底该如何做到防 ...
- UiAutoMator一些常用的方法
常用查找UiObject方法 // 通过ID查找public static UiObject findById(String text)throws UiObjectNotFoundException ...