Less中变量的使用

很多编程语言中都有变量这个概念，在不同的编程语言中定义变量的方式也不一样。例如在 JavaScript 中可以通过 var 关键字定义变量。

变量表示可以改变的值， Less 中的变量可以帮助我们为重复定义的样式类或者属性值起一个别名。这是什么意思呢，看下面这个例子。

示例：

例如在 CSS 代码中，某个颜色值 #f93d66 在多个地方被使用：

.xkd{
  border: 1px solid #f93d66;
}
.xkd h3{
  background-color: #f93d66;
}
.xkd .circle{
  color: #f93d66;
}

如果使用 Less 语言来写，如下所示：

@color: #f93d66;

.xkd{
   border: 1px solid @color;
   h3{
      background-color: @color;
   }
   .circle{
      color: @color;
   }
}

将这个颜色值赋给了一个变量 @color，然后在使用的时候直接使用这个变量名。

这样有一个什么好处呢，可能上述代码还不明显，如果是在大型项目中，一个相同的值可能重复几十上百次。如果后期我们想要修改这个颜色，一个一个去改会很麻烦，而使用变量，就只要修改这个变量值即可，不需要修改多个地方，让代码更加容易维护。

变量的语法

在 Less 语言中，我们可以使用 @ 符号来定义变量，变量分配使用冒号 : 来分配 ，注意是冒号不是等号哟。

@变量名：变量值;

示例：

例如下面这段代码，定义了一个变量 @border ：

@border:1px solid #ccc;
.xkd{
   font-size: 14px;
   border: @border;
}
.hava{
   border: @border;
}

编译成 CSS 代码：

.xkd {
  font-size: 14px;
  border: 1px solid #ccc;
}
.hava {
  border: 1px solid #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");
}