Less 嵌套

本节我们学习 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;
      }
   }
}

这样整体看起来是不是更直观一些，一层套一层。但是注意哟，一般我们不会嵌套太多层，嵌套的层数越多，性能就越差，建议一般嵌套三层左右。