Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力,并且模仿了 HTML 的组织结构。
.bordered {
border-top: dotted 5px goldenrod;
border-bottom: solid 3px black;
}
div {
background-color: wheat;
width: 100px;
height: 200px;
.bordered();
.span {
color: rebeccapurple;
.bordered();
}
}
(& 表示当前选择器的父级):
.bordered {
border-top: dotted 5px goldenrod;
border-bottom: solid 3px black;
}
div {
background-color: wheat;
width: 100px;
height: 200px;
.bordered();
.span {
color: rebeccapurple;
.bordered();
}
&:hover{
background-color: red;
}
}