style.less的使用

@width: 200px; //定义一个变量width，里面存储了一个数据100px
@height: 200px;
@color1: rgba(188,166,188,0.8);
@color2: red;
@color3: aqua;
/*

• 变量的作用，可以实现修改一处变幻多处的目的，同时缩小代码维护的范围，
• 提高代码维护的效率，减少代码维护的成本。
  /
  /
• 混入：将公用的一段代码写入到一个对应的class选择器中，将来使用到该段代码的部分我们可以用
• 该class选择器替换，这个过程叫混入
• 混入分为带参数的混入和不带参数的混入，但是为了提高代码的可复用性，我们一般使用带参数
• 混入，另外参数可以设置默认值，多个参数之间用","隔开。
• 注意：不带参数的混入适用于操作固定的时候，比如过渡效果，如果过渡时间相同时，我们可以使用
  /
  .transition(@time:1s) {
  -webkit-transition: @time;
  -moz-transition: @time;
  -ms-transition: @time;
  -o-transition: @time;
  transition: @time;
  }
  .translate(@distanceX:0, @distanceY:0) {
  -webkit-transform: translate(@distanceX,@distanceY);
  -moz-transform: translate(@distanceX,@distanceY);
  -ms-transform: translate(@distanceX,@distanceY);
  -o-transform: translate(@distanceX,@distanceY);
  transform: translate(@distanceX,@distanceY);
  }
  .out {
  width: (2@width);
  height: (2*@height);
  background-color: @color1;
  .first {
  width: @width;
  height: @height;
  background-color: @color3;
  .transition(2s);
  }
  .first:hover {
  .translate(0,800px);
  }
  .last {
  width: @width;
  height: @height;
  background-color: @color2;
  .transition(5s);
  }
  .last:hover {
  .translate(500px,-300px);
  }
  }