Less语言特性 - 变量

LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。
LESS中声明变量的格式为“@变量名：变量值”。
下表详细说明了使用LESS 变量。

概述

多次重复相同的值，通常在您的样式表中可看到。不用多次使用相同的值，可以使用变量。它使代码的维护更容易，并且可以从单个位置控制这些值。

变量插值

变量插值是评估包含一个或多个变量的表达式或文字的过程，产生其中变量用其对应值替换的输出。变量也可以在其他地方使用，如选择器名称，属性名称，URL和@import语句。

选择器插值

@head: h;
.@{head}2 {
  font-size: 16px;
}

URL插值

@images: "http://www.w3cschool.cn";

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

Import语句插值

@path : "//www.w3cschool.cn/less";
@import "@{path}/external1.less";
.myclass{
 color : #A52A2A;
}

属性名插值

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

变量名称

我们可以定义变量名称由一个值组成的变量。

变量延迟加载

在延迟加载中，即使它们尚未声明，也可以使用变量。

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

默认变量

默认变量只有在尚未设置时才能设置变量。此功能不是必需的，因为变量可以很容易地通过定义它们后覆盖。

@import "//www.w3cschool.cn/less/lib.less"; // first declaration of @color
@color: green; // this will override @color defined previously
p{
 color : @color;
}