less变量
什么是less
Less是一个Css预编译器,意思是指它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions)和许多其他技术,让你的Css更具维护性、主题性、扩展性。例如PHP就不能直接和css定义变量,而通过学习less就可以进行编写。使用less来维护css是非常方便的。
LESS的下载
Less可以到官网去进行下载,网页有中文版(http://www.lesscss.net)和英文版(http://www.lesscss.org)。
LESS中的注释
Less中有两种注释形式:
// 以//开始的注释,不会被编译到css文件中去。
/**/ 以/**/包裹的注释会被编译在css的文件中。
如何使用less
Less文件只有在被编译后才能被浏览器识别使用。
less变量
普通的变量
Css默认不支持变量,当我们使用less之后就可以使用。
其定义方式是 @变量名:值 ,如下,我们定义一个变量green,设置一个颜色green,然后将网页背景设置为绿色:
@green: #801f77; header { background: @green; }
注意:由于变量只能定义一次,实际上他们就是“常量”
作为选择器和属性名
使用时将变量以@{变量名}的方式使用,使用例子如下:
作为选择器和属性名的变量
@kuandu:width; .@{kuandu}{ @{kuandu}:150px }
注意:这里的变量即使选择器又是属性名,不能写错。
作为URL
使用时,使用””将变量的值括起来,使用时同样将变量以@{变量名}的方式使用。使用例子如下:
//作为URL的变量
@imgurl:"https://www.baidu.com/img/"; header{ background: @green url("@{imgurl}bdlogo.png"); height: 500px; }
延迟加载
延迟加载:变量是延迟加载的,在使用前不一定要预先说明。
意思是指:在前面使用了这个变量,但没有定义,但可以在后面给他定义出来,不影响输出。
定义多个相同名称的变量时
在定义一个变量两次时,只会使用最后定义的变量,Less会从当前作用域向上搜索。这个行为类似于css的定义中始终使用最后定义的属性值。使用实例如下:
//定义多个相同名称的变量时
@var: 0; .class { @var: 1; .brass { @var: 2; three: @var; //这是的值是3 @var: 3; } one: @var; //这是的值是1 }