less的使用和特点

1.less的使用，在style标签内声明lang=“less”，

<style lang="less" scoped>

2.less的特点，

（1）嵌套属性，可以进行属性的嵌套使用，不仅减少了代码量，更使代码的逻辑更加清晰。

<style lang="less" scoped>
#newList{
  padding-top:20px ;
  .img{
    width: 100%;
    height: 100%;
    display:table-cell;
    vertical-align:middle;
    border-radius: 10%;
    img{
      width: 100%;
      height: 100%;
      border-radius: 4%;
    }
  }
}
</style>

（2）全局样式变量，

@box_width:200px;

.box{
    width:@box_width
}

相当于，

.box{
    width:200px;
}

定义全局的样式，需要的时候引用，修改全局样式更方便。

（3）继承

.box1{
     color:red;
     font-size:50px;
}
.box2{
     &:extend(.box1);
}