LESS详解之变量(@)
来源:互联网 发布:android sdk linux 编辑:程序博客网 时间:2024/04/30 04:01
变量基本上是每个语言脚本上都会涉及的一个小小知识点,是学好语言脚本的必经之路。LESS中也可以设置变量,然后通过变量可以改变整个网站的设计风格。良好的掌握LESS中变量的用法,是LESS的基础。
变量语法
使用方法就是在“@”后添加变量名称然后与变量值用冒号“:”链接。如下
LESS代码
@width : 300px;.meng {width: @width;}
编译后的CSS代码
.meng { width: 300px;}
变量的作用域
如果对同一个变量定义两次的话,在当前作用域中最后一次定义的将被使用。这与CSS的机制类似,最后一次定义的值会成为这个属性的值。若定义在嵌套之中,那么这个变量就只能服务于这个嵌套之内的属性了。变量也是没有顺序可言的,只要页面里有,都会按顺序覆盖,按顺序加载。如下
LESS代码
@width : 1px;.meng {@width : 2px;.long {@width : 9000px;width:@width;@width : 22px;}width: @width;}
编译后的CSS代码
.meng { width: 2px;}.meng .long { width: 22px;}
下面这段例子也是有效的。
LESS代码
.long { width: @w; @o: 9%;}@w: @o;@o: 100%;
编译后的CSS代码
.long { width: 9%;}
字符串插值
变量可以用像 @{name} 这样的结构,以类似 ruby 和 php 的方式嵌入到字符串中
LESS代码
@myUrl: "http://blog.csdn.net/lee_magnum";.meng {background-image: url("@{myUrl}/images/bg.png");}
编译后的CSS代码
.meng { background-image: url("http://blog.csdn.net/lee_magnum/images/bg.png");}
选择器插值
如果需要在选择器中使用 LESS 变量,只需通过使用和字符串插件一样的 @{selector} 即可。
LESS代码
@Myname: meng1314;.@{Myname} { width:1000000000000px;}
编译后的CSS代码
.meng1314 { width: 1000000000000px;}
media query作为变量
如果你希望在media query中使用LESS变量,你可以直接使用普通的变量方式。因为“~”后面的值是不被编译的,所以可以用作media query的参数。小例子如下
LESS代码
@singleQuery: ~"(max-width: 480px)";@media screen, @singleQuery { div {width:2000px; }}
编译后的CSS代码
@media screen, (max-width: 480px) { div { width: 2000px; }}
用一个变量值的变量
在定义变量值时使用其它的变量。
LESS代码
@meng : 5201314px;@loveDay : meng;div {width:@@loveDay;}
编译后的CSS代码
div { width: 5201314px;}
LESS详解之变量(@)就为大家介绍到这里了。这并不是最完善的有关LESS的讲解,也不是最完美的讲解,只是把我学习的笔记和大家分享一下,希望能对大家有所帮助。掌握好LESS详解之变量(@),也是为之后LESS深入学习打好基础。
- LESS详解之变量(@)
- Less变量详解
- LESS详解之编译LESS
- LESS详解之嵌套(&)
- LESS详解之命名空间
- LESS详解之函数(一)
- LESS详解之函数(二)
- LESS详解之函数(三)
- LESS详解之函数(四)
- LESS详解之函数(五)
- LESS详解之函数(六)
- LESS详解之函数(七)
- Linux命令详解之less
- less-变量
- Less变量
- LESS详解之混合(Mixins)初级
- LESS详解之混合(Mixins)中级
- LESS详解之混合(Mixins)高级
- windows编程之七文本编辑器的操作
- 计算指数函数的算法
- linux下通过yum安装svn及配置
- 面向对象(4)
- OCP-1Z0-051-V9.02-29题
- LESS详解之变量(@)
- PS制作android图标
- 将数字格式化成货币字符串
- xdsec2013线下赛之FtpServer.exe溢出分析
- cocos2dx 在android下的帧频设置问题
- socket 发送十六进制的字符串(十六进制字符串与其他类型的转换)(转)
- uva 10344 23 out of 5
- HDU-2807 The Shortest Path 最短路
- Ubuntu 12.04 配置Samba共享服务