选择器变量

1. .less 代码

   @app: app;
   .@{app}{
       color: red;
   }
   #@{app}{
       color: pink;
   }

2. 编译后的 .css 文件

   .app {
     color: red;
   }
   #app {
     color: pink;
   }

属性变量

1. .less

   @bgc: background-color;
   @bgcolor: red;
   .@{app}{
       @{bgc}: @bgcolor
   }

2. 编译后 .css

   .app {
     background-color: red;
   }

url 变量

1. .less

   // url 变量
   @img: "../image/img";
   @icon: "../image/icon";
   .box {
       background: url("@{img}/bg.png");
       background-image: url("@{icon}/bg.png");
   }

2. .css

   .box {
     background: url("../image/img/bg.png");
     background-image: url("../image/icon/bg.png");
   }

声明变量

1. .less

   @box: {
       width: 100px;
       height: 100px;
       background-color: red;
   }
   .app {
       @box();
   }

2. .css

   .app {
     width: 100px;
     height: 100px;
     background-color: red;
   }

变量运算

1. .less

   @width: 200px;
   @color: #111;
   .box {
       width: @width - 20;
       height: @width * 2;
       color: @color + #777;
       background-color: @color * 4;
   }

2. .css

   .box {
     width: 180px;
     height: 400px;
     color: #888888;
     background-color: #444444;
   }

3. 注： 运算符两侧必须加空格

变量作用域

1. .less

   @let: @a;
   @a: 100%;
   .box {
       width: @let;
       @a: 9%;
   }

2. .css

   .box {
     width: 9%;
   }

3. 原理：就近原则