less详解

阅读前说明：
左窗口为编译前，右是编译成css后

• 文字版–编译前

.box{
    background:red;
}
@num:100px;
.box4{//运算中单位可以不同，最终单位是运算的中第一个值的单位
    width:@num*3;
    height: @num+10em;
    margin:10em+@num;
    font:20px /1.5;//Font:大小/高度
    padding:20px / 1.5;
    padding:~"20px / 1.5";
    color:#010101 *2;
}
.show{
    display: block;
}
.hide(@color){
    display: none;
    color:@color;
}
.box6{//less才能混入
    width:100px;
    .show;//混入class
    .hide(blue);//混入可传值class
}
#num(){
    .show{
        display: inline-block;
    }
}
.box7{
    #num.show;
}
.line{
    display: inline;
}
.box8{
    &:extend(.line);//继承
}
.box9{
    background+:url(a.png);
    background+:url(b.png);//合并，有逗号
    transform+_:scale(2);
    transform+_:rotate(20deg);//没逗号
}
.box{
    width:100px;
    @media all and (min-width:768px){//媒体查询与嵌套
        width:600px;
    }
    @media all and (min-width:1440px){
        width:900px;
    }
}
@count:3;
.get(@cn) when (@cn<4){//条件
    width:100px + @cn;
}
.box10{
    .get(@count);
}
@count2:0;
.get2(@cn) when (@cn<3){//循环
    //.get2((@cn+1));210顺序
    .box-@{cn}{
        width:100px+@cn;
    }
    .get2((@cn+1));//这句在前与在后是不一样的
}
.get2(@count2);

• 编译后

.box {
  background: red;
}
.box4 {
  width: 300px;
  height: 110px;
  margin: 110em;
  font: 20px / 1.5;
  padding: 13.33333333px;
  padding: 20px / 1.5;
  color: #020202;
}
.show {
  display: block;
}
.box6 {
  width: 100px;
  display: block;
  display: none;
  color: blue;
}
.box7 {
  display: inline-block;
}
.line,
.box8 {
  display: inline;
}
.box9 {
  background: url(a.png), url(b.png);
  transform: scale(2) rotate(20deg);
}
.box {
  width: 100px;
}
@media all and (min-width: 768px) {
  .box {
    width: 600px;
  }
}
@media all and (min-width: 1440px) {
  .box {
    width: 900px;
  }
}
.box10 {
  width: 103px;
}
.box-0 {
  width: 100px;
}
.box-1 {
  width: 101px;
}
.box-2 {
  width: 102px;
}

实战

.aniFun(@step,@max,@url) {
  .forAni(@percent) when (@percent < @max) {
    @num: percentage(@percent * @step / 100);
    @{num} {
      background-image: url('~@/assets/images/animation/@{url}@{percent}.png');
    }
    .forAni(@percent + 1);
  }
  .forAni(0);
}
@keyframes boxAniEnd {
  .aniFun(4,25,'leave/xiaoshi');
}

• 编译结果

@keyframes boxAniEnd {
  0% {
    background-image: url(./static/xiaoshi0.df30eb7a.png);
  }
  4% {
    background-image: url(./static/xiaoshi1.9fdafeb9.png);
  }
  8% {
    background-image: url(./static/xiaoshi2.a548c9f5.png);
  }
  12% {
    background-image: url(./static/xiaoshi3.93d8278c.png);
  }
  16% {
    background-image: url(./static/xiaoshi4.2db26013.png);
  }
  20% {
    background-image: url(./static/xiaoshi5.7c98fecc.png);
  }
  24% {
    background-image: url(./static/xiaoshi6.d627dc28.png);
  }
  28.000000000000004% {
    background-image: url(./static/xiaoshi7.9daf1f28.png);
  }
  32% {
    background-image: url(./static/xiaoshi8.c8d655e7.png);
  }
  36% {
    background-image: url(./static/xiaoshi9.a93a2e97.png);
  }
  40% {
    background-image: url(./static/xiaoshi10.efc60cd1.png);
  }
  44% {
    background-image: url(./static/xiaoshi11.0f00e56a.png);
  }
  48% {
    background-image: url(./static/xiaoshi12.98277675.png);
  }
  52% {
    background-image: url(./static/xiaoshi13.f9263c3e.png);
  }
  56.00000000000001% {
    background-image: url(./static/xiaoshi14.dbffaee2.png);
  }
  60% {
    background-image: url(./static/xiaoshi15.629e1e87.png);
  }
  64% {
    background-image: url(./static/xiaoshi16.487d809f.png);
  }
  68% {
    background-image: url(./static/xiaoshi17.2c97e95d.png);
  }
  72% {
    background-image: url(./static/xiaoshi18.b3618494.png);
  }
  76% {
    background-image: url(./static/xiaoshi19.41643fda.png);
  }
  80% {
    background-image: url(./static/xiaoshi20.a5567cff.png);
  }
  84% {
    background-image: url(./static/xiaoshi21.742c7bf2.png);
  }
  88% {
    background-image: url(./static/xiaoshi22.cba53cb7.png);
  }
  92% {
    background-image: url(./static/xiaoshi23.77fd181c.png);
  }
  96% {
    background-image: url(./static/xiaoshi24.e5714170.png);
  }
}