Less – 变量

定义和使用变量

在CSS中经常可以看到多次重复的相同值，在Less中通过使用变量避免相同值的重复。变量使代码的维护更加容易，修改值，只需在变量定义的地方一处修改就可以。

变量使用@符号定义，使用冒号:赋值。变量定义好后就可以在各处使用。

示例：

@color1: #ca428b;

.div1 {
   background-color : @color1;
}

.div2 {
   background-color : @color1;
}

变量插值

除了属性值，变量还可以在其他地方使用，比如选择器名称、属性名称、url和@import语句。在这些地方中引用变量，变量名必须放在以@符号为前缀的大括号({})中，例如：@{color1}

选择器名称中使用变量

选择器名称可以引用任何变量。

less 代码：

@selector: h2;

@{selector} {
   background: #2ECCFA;
}

css 输出：

h2 {
   background: #2ECCFA;
}

url中使用变量

变量可用于存储url。

less 代码：

@images: "https://www.qikegu.com";

.myclass {
   background : url("@{images}/less/images/less_variables/birds.jpg");
   width:800px;
   height:500px;
}

编译后 css输出：

.myclass {
   background: url("https://www.qikegu.com/less/images/less_variables/birds.jpg");
   width: 800px;
   height: 500px;
}

@import语句中使用变量

@import语句中可以用变量来保存路径，这在引用公共父目录时非常有用。

less 代码：

@path : "https://www.qikegu.com/less";
@import "@{path}/external.less";
.myclass {
   color : #A52A2A;
}

external.less的内容：

.myclass {
   background: #C0C0C0;
}

编译后的css输出：

body {
   background: #C0C0C0;
}

p {
   color: #A52A2A;
}

属性名中使用变量

在属性名中可以引用变量。

@my-property: color;
.myclass {
   background-@{my-property}: #81F7D8;
}

编译后css输出：

.myclass {
   background-color: #81F7D8;
}

变量名中引用变量

可以在变量名中引用变量。

less代码：

.myclass {
   @col: #ca428b;
   @color: "col";
   background-color: @@color;
}

编译后css输出：

myclass {
   background-color: #ca428b;
}

懒加载

懒加载允许，变量使用在前，变量声明在后。

less 代码：

p {
   font-size: @a;
   color: #ca428b;
}
@a: @b;
@b: 25px;

编译后css输出：

p {
   font-size: 25px;
   color: #ca428b;
}

覆盖变量值

多次定义变量值，后面的会覆盖前面的，本地的会覆盖上一级范围的。

less代码：

@color:#800080;

@color: #DDD;

h3 {   
    color: @color;  
}

编译后css输出：

h3 {
  color: #DDD;
}

变量作用域

变量作用域指定变量可用范围。编译时，编译器先从本地范围查找变量定义，如果没找到，编译器将到上一级范围查找，以此类推。

通常一个大括号内定义的变量是局部变量，作用域局限于大括号内。

less 代码：

@var: @a;
@a: 15px;

.myclass {
   font-size: @var;
   @a:20px;
   color: green;
}

编译后 css 输出：

.myclass {
   font-size: 20px;
   color: green;
}