嵌套,是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;
}
用起来还是蛮方便的