less简要入门——变量

变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

案例1：

@nice-blue: #5B83AD;//定义一个变量@light-blue: @nice-blue + #111;//引用变量的值进行运算#header { color: @light-blue; }//引用变量的值

解析后：

#header {  color: #6c94be;}

案例2：

@ff1: 8px;@ff2: ff1;div{    font-size: @@ff2;//@ff2得到的值是ff1，再次使用@，即@@ff2就得到@ff1的值}

解析后：

div {  font-size: 8px;}

案例3：

将案例2中改为只使用一个@，如下：

@ff1: 8px;@ff2: ff1;div{    font-size: @ff2;}

只会把@ff2的值ff1当成一个普通属性值，不会解析成8px，结果如下：

div {  font-size: ff1;}

案例4：

将案例2中的@ff2的值ff1改为字符串形式：

@ff1: 8px;@ff2: 'ff1';div{    font-size: @@ff2;}

依然能够正常解析，如下：

div {  font-size: 8px;}

总结：
1、通过“@变量名：变量值”的方式定义一个变量；
2、通过“属性：@变量名”的方式引用一个变量的值；
3、一个变量可引用另一个变量的值进行运算；
4、可以使用多个@符号进行多重引用。