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-->