本节我们学习 Less 中的嵌套,嵌套应该很容易理解,HTML 语言中就支持标签的嵌套。我们在使用 CSS 时,如果想要为多层嵌套的元素设置样式,要么给元素加上一个类选择器或ID选择器,要么使用后代选择器。例如:
.xkd{
font-size: 14px;
}
.xkd p{
line-height: 25px;
}
.xkd p span{
color: #ccc;
}
这样写虽然也好理解,但是没有那么直观,维护起来也不方便。
而 Less 中的嵌套规则正好可以解决这样问题,嵌套规则允许在一个选择器中嵌套另一个选择器,这样可以使得代码看起来一目了然,后期维护也方便。
嵌套的使用
例如上面的 CSS 代码使用 Less 语言来写:
.xkd{
font-size: 14px;
p{
line-height: 25px;
span{
color: #ccc;
}
}
}
这样整体看起来是不是更直观一些,一层套一层。但是注意哟,一般我们不会嵌套太多层,嵌套的层数越多&