很多编程语言中都有变量这个概念，在不同的编程语言中定义变量的方式也不一样。例如在 JavaScript 中可以通过 var 关键字定义变量。
变量表示可以改变的值， Less 中的变量可以帮助我们为重复定义的样式类或者属性值起一个别名。这是什么意思呢，看下面这个例子。

示例：

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

  1. .xkd {  
  2.   border: 1px solid #f93d66; 
  3. } 
  5. .xkd h3 {   
  6.   background-color: #f93d66; 
  7. } 
  9. .xkd .circle {   
  10.   color: #f93d66;
  11. }

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

  1. @color: #f93d66;
  3. .xkd{
  4.    border: 1px solid @color;
  5.    h3{
  6.       background-color: @color;
  7.    }
  8.    .circle{
  9.       color: @color;
  10.    }
  11. }

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

变量的语法

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

  1. @变量名：变量值;

示例：

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

  1. @border:1px solid #ccc;
  2. .xkd{
  3.    font-size: 14px;
  4.    border: @border;
  5. }
  6. .hava{
  7.    border: @border;
  8. }

编译成 CSS 代码：

  1. .xkd {
  2.   font-size: 14px;
  3.   border: 1px solid #ccc;
  4. }
  5. .hava {
  6.   border: 1px solid #ccc;
  7. }

注意使用的时候，变量名前面也要带 @ 符号。

变量的使用

Less 语言中变量的使用方式主要有以下几种：

  • 普通变量
  • 选择器变量
  • 属性名变量
  • URL变量
    普通变量
    普通变量就是我们上面使用到的变量，定义方式一般为 @变量名：变量值，通常用于定义颜色值或字体大小等。
    示例：
    ```css @color: pink; @radius : 5px;

.xkd{ color: @color; border-radius: @radius; }

  1. 编译成 CSS 代码：
  2. ```css
  3. .xkd {
  4.   color: pink;
  5.   border-radius: 5px;
  6. }

选择器变量

变量可以把选择器变为一个动态的选择器，也可以复用选择器中重复的字符。在使用选择器变量时，变量名需要放在用 @ 符号前缀的花括号 {} 内。

示例：

下面是一段 Less 代码，其中定义了一个变量 @name，变量的值为 xkd_top，使用时需要将这个变量 @name 使用花括号包起来：

  1. @name: xkd_top;
  3. .@{name} {
  4.     font-size: 14px;
  6. }
  7. #@{name} {
  8.     color: #aaa;
  9. }
  10. .div_@{name} {
  11.     padding: 10px;
  12. }

编译成 CSS 后输出为：

  1. .xkd_top {
  2.   font-size: 14px;
  3. }
  4. #xkd_top {
  5.   color: #aaa;
  6. }
  7. .div_xkd_top {
  8.   padding: 10px;
  9. }

属性名变量

属性名变量的使用其实和选择器变量的使用差不多，都是通过 {} 将变量名括起来。

示例：

例如将 font-size 属性定义为一个属性名变量，然后只要使用到这个属性，就可以用 @{fz} 代替：

  1. @fz:font-size;
  3. h3{
  4.     @{fz}:18px;
  5. }
  7. p{
  8.     @{fz}:12px;
  9. }

编译成 CSS 代码：

  1. h3 {
  2.   font-size: 18px;
  3. }
  4. p {
  5.   font-size: 12px;
  6. }

URL变量

文件的 URL 也可以作为一个变量使用。

示例：

例如我们将某个地址放到一个变量中：

  1. @xkd:"https://www.9xkd.com/";
  3. .banner{
  4.     background: url("@{xkd}/img.png");
  5. }

编译成 CSS

  1. .banner{
  2.   background: url("https://www.9xkd.com//img.png");
  3. }