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

}

 

文章来源:麦子学院

原文链接:http://www.maiziedu.com/wiki/css/variable/

<!--EndFragment-->

相关推荐