less的变量

.box1 {
  width: 300px;
  height: 100px;
  background-color: chartreuse;
  .box2 {
    width: 100px;
    height: 100px;
    background-color: aqua;
    color: rgb(226, 55, 55);
  }
}

// 变量，在变量中可以存储一个任意的值
// 并且我们可以需要时，任意的修改变量中的值
@a: 100px;
@b: red;
@c:box4;

.box3{
  width: @a;
  height: @a;
}

// 作为类名，或者一部分值使用时必须以 @{ 变量名 } 的形式使用
@{c}{
  width: 100px;
  background-image: url("@{c}/1.png");
}

div{
  // 变量发生重名时，会优先使用比较近的变量
  @d:150px;
  width: @d;
  height: @e;
}
// 可以在变量声明前就是用变量

// 新的语法
div{
  width: 300px;
  // height: $width;
}