3.Less变量

3.Less变量（variables）

1.普通的变量

       ①变量的定义方式：@

       ②实例：

              Less编写：

              @blue：#5b83ad；

      #header{ color：@blue;}

        编译结果：

              #header：{ color：#5b83ad; }

       ③注意：由于变量只能定义一次，实际上他们就是“常量”;

2.作为选择器和属性名

      ①使用时将变量以 @{变量名}的方式使用；

      ②实例：

           Less编写：

           @content：width;

           @{content}{

                 @{content}:960px;

 height:500px;

 }

编译结果：

.width:{

      width:960px;

     height:500px;

}

3.作为URL

      ①使用时用“”将变量的值扩起来，使用时同样将变量以@{变量名}的方式使用。

      ②实例：

      Less编写：

      @myUrl:” https://www.baidu.com/img/”;

      body{

           background:url(“@{myUrl}baidu_jgylogo3.gif”)#47fd55 no-repeat;

      }

     编译结果：

     body{

background:url(“https://www.baidu.com/img/baidu_jgylogo3.gif”)#47fd55 no-repeat;

     }

4.延迟加载

       ①什么是延迟加载：变量时延迟加载的，在使用前要不一定要预先声明。

      ②实例：

      Less编写：

      .lazy-eval{

           width:@val;

}

@val:@a;

@a:10%;

编译结果：

.lazy-eval-scope{

              width:10%;

}
5.定义多个相同名称的变量时

①在定义一个变量两次时，只会使用最后一次定义的变量，Less会从当前作用域中向上搜索，这个行为类似于Css中的使用最后的定义的属性值。

②实例：

Less编写：

@var:0;

.class{

  @var: 1;

     .brass {

       @var: 2;

      three: @var;  //这是的值是3

       @var: 3;

     }

  one: @var; //这是的值是1

}

编译结果：

.class{

  one: 1;

}

.class.brass {

  three: 3;

}