嵌套，是less里面最有意思的小东西，比如说我们经常性的去写一些列表性的东西

 

html

      
    
       
links2018-07-16
    
       
links2018-07-16
    
       
links2018-07-16
      

 

less

/*一般这么写.list{}.list li{}.list a{}.list span{}*/.list{
    　　width:600px;　　margin: 30px auto;　　padding:0;　　list-style: none;　　li{　　　　height: 30px;　　　　line-height: 30px;　　　　background-color: pink;　　　　margin-bottom:5px;　　}　　a{
    //不要写在li里面，尽量避免嵌套层级过深　　　　float: left;　　}　　span{
    　　　　float: right;　　}}=>/*一般这么写.list{}.list li{}.list a{}.list span{}*/.list {
    　　width: 600px;　　margin: 30px auto;　　padding: 0;　　list-style: none;}.list li {
    　　height: 30px;　　line-height: 30px;　　background-color: pink;　　margin-bottom: 5px;}.list a {
    　　float: left;}.list span {
    　　float: right;}

 

除了这个，它还提供一个更好玩的小东西，加hover的时候之前这样写

/**.list a{}.list a:hover{}*/.list{
    　　width:600px;　　margin: 30px auto;　　padding:0;　　list-style: none; 　　a{　　　　float: left;　　　　//& 代表上了一层的选择器　　　　&:hover{　　　　　　color:red;　　　　}　　}}=>/**.list a{}.list a:hover{}*/.list {
    　　width: 600px;　　margin: 30px auto;　　padding: 0;　　list-style: none;}.list a {
    　　float: left;}.list a:hover {
    　　color: red;}

用起来还是蛮方便的