这一节，我们将学习Less中的变量。很多编程语言都有变量的概念，不同的语言定义变量的方式也不同。例如，可以在JavaScript中使用var关键字定义变量。变量代表可以改变的值。Less中的变量可以帮助我们为重复定义的样式类或属性值创建别名。这是什么意思？请参见下面的示例。示例：比如在CSS代码中，某个颜色值#f93d66被多处使用：.xkd{border:1pxsolid#f93d66;}.xkdh3{background-color:#f93d66;}.xkd.circle{color:#f93d66;}如果你用Less语言写，会是这样的：@color:#f93d66;.xkd{border:1pxsolid@color;h3{背景颜色：@color;}.circle{颜色：@color;}}把这个颜色值赋值给一个变量@color，然后在使用的时候直接使用这个变量名。这样做有什么好处？上面的代码可能不是很明显。如果是在大型项目中，同一个值可能会重复几十次、几百次。如果后面我们要修改这个颜色，一个一个改会很麻烦，但是使用变量，我们只需要修改这个变量的值，不需要修改多处，让代码更容易维护。变量的语法在Less语言中，我们可以使用@符号来定义变量，使用冒号:来为变量赋值。请注意，冒号不是等号。@变量名：变量值；例子：比如下面的代码定义了一个变量@border：@border:1pxsolid#ccc;.xkd{font-size:14px;border:@border;}.hava{border:@border;}编译成CSS代码：.xkd{font-size:14px;border:1pxsolid#ccc;}.hava{border:1pxsolid#ccc;}注意使用时，变量名前还要加上@符号。Less语言中变量的使用主要有以下几种变量的使用方式：普通变量选择器变量属性名变量URL变量普通变量就是我们上面使用的变量，定义方式一般是@变量名：变量值，通常使用定义颜色值或字体大小等例如：@color:pink;@radius:5px;.xkd{color:@color;border-radius:@radius;}编译成CSS代码：.xkd{color:pink;border-radius:5px;}选择器变量变量可以将选择器变成动态选择器，也可以复用选择器中重复的字符。使用选择器变量时，变量名需要用花括号{}括起来，并以@符号为前缀。例子：下面是一段Less代码，定义了一个变量@name，其值为xkd_top。使用时，@name这个变量需要用大括号括起来：@name:xkd_top;.@{name}{font-size:14px;}#@{name}{color:#aaa;}.div_@{name}{padding:10px;}编译成CSS后输出为：.xkd_top{font-size:14px;}#xkd_top{color:#aaa;}.div_xkd_top{padding:10px;}属性名称变量的使用属性名变量其实类似于选择器变量的使用，变量名用{}括起来。例子：比如把font-size属性定义为一个属性名变量，那么只要用到这个属性，就可以用@{fz}代替：@fz:font-size;h3{@{fz}:18px;}p{@{fz}:12px;}编译成CSS代码：h3{font-size:18px;}p{font-size:12px;}URL变量文件的URL也可以作为多变的。例子：比如我们把某个地址放到一个变量中：@xkd:"https://www.9xkd.com/";.banner{background:url("@{xkd}/img.png");}编译成CSS.banner{background:url("https://www.9xkd.com//img.png");}总结在实际应用中，我们通常会将多个页面的通用样式统一放在一个文件中。声明变量也可以放在单独的文件中，这样有利于我们维护代码。
