css代码中，往往同一个值会被重复用到，而这个值需要修改时又得一个个找到再逐一修改，这样是代码维护的难度增大。而Less可以将这个值写作一个变量，当这个值需要修改时，直接修改这个变量的值就可以了（这里的变量是唯一的，只能定义一次，不可以重复使用）

 /* Less */
      @color: #999;
      @bgColor: skyblue;//不要添加引号
      @width: 50%;
      #wrap {
        color: @color;
        width: @width;
      }
    
      /* 生成后的 CSS */
      #wrap {
        color: #999;
        width: 50%;
      }

以@开头定义变量，并且使用时直接键入@名称。
上面说的是值变量，下面我们来说一说选择器变量: 让选择器变成动态:

/* Less */
      @mySelector: #wrap;
      @Wrap: wrap;
      @{mySelector}{ //变量名 必须使用大括号包裹
        color: #999;
        width: 50%;
      }
      .@{Wrap}{
        color:#ccc;
      }
      #@{Wrap}{
        color:#666;
      }
    
      /* 生成的 CSS */
      #wrap{
        color: #999;
        width: 50%;
      }
      .wrap{
        color:#ccc;
      }
      #wrap{
        color:#666;
      }

3.属性变量：可以减少代码书写量

 /* Less */
      @borderStyle: border-style;
      @Soild:solid;
      #wrap{
        @{borderStyle}: @Soild;//变量名 必须使用大括号包裹
      }
    
      /* 生成的 CSS */
      #wrap{
        border-style:solid;
      }

url 变量

项目结构改变时，修改其变量即可。

  /* Less */
  @images: "../img";//需要加引号
  body {
    background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
  }

  /* 生成的 CSS */
  body {
    background: url("../img/dog.png");
  }

声明变量

有点类似于 下面的 混合方法

  - 结构: @name: { 属性: 值 ;};
  - 使用：@name();
  /* Less */
  @background: {background:red;};
  #main{
      @background();
  }
  @Rules:{
      width: 200px;
      height: 200px;
      border: solid 1px red;
  };
  #con{
    @Rules();
  }

  /* 生成的 CSS */
  #main{
    background:red;
  }
  #con{
    width: 200px;
    height: 200px;
    border: solid 1px red;
  }

变量运算

不得不提的是，Less 的变量运算完全超出我的期望，十分强大。

• 加减法时 以第一个数据的单位为基准

• 乘除法时 注意单位一定要统一
  /* Less */
  @width:300px;
  @color:#222;

  wrap{

  width:@width-20;
  height:@width-20*5;
  margin:(@width-20)*5;
  color:@color*2;
  background-color:@color + #111;
  

  }

  /* 生成的 CSS */

  wrap{

  width:280px;
  height:200px;
  margin:1400px;
  color:#444;
  background-color:#333;
  

  }

变量作用域

一句话理解就是：就近原则，不要跟我提闭包。

借助官网的Demo

  /* Less */
  @var: @a;
  @a: 100%;
  #wrap {
    width: @var;
    @a: 9%;
  }

  /* 生成的 CSS */
  #wrap {
    width: 9%;
  }

用变量去定义变量

  /* Less */
  @fnord:  "I am fnord.";
  @var:    "fnord";
  #wrap::after{
    content: @@var; //将@var替换为其值 content:@fnord;
  }
  /* 生成的 CSS */
  #wrap::after{
    content: "I am fnord.";
  }