less嵌套规则

<ul class="list">
    <li><a href="#">links</a><span>2018-07-16</span></li>
    <li><a href="#">links</a><span>2018-07-16</span></li>
    <li><a href="#">links</a><span>2018-07-16</span></li>
</ul>

/*
一般这么写
.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;
}

/**
.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;
}