less嵌套规则

Posted 2020-12-04 wzndkj

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

 

html

<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>

 

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;
}

用起来还是蛮方便的