在前端开发中，CSS 是必不可少的一部分，而 LESS 则是一种功能更为强大的 CSS 预处理器。LESS 不仅可以让 CSS 更加简洁、易于维护，还可以提供更多的功能，其中 "Nested Rules" 就是其中之一。
"Nested Rules" 是 LESS 中的一种特殊语法，它可以让我们在 CSS 中嵌套规则，从而使得代码更加清晰、易于理解。在本文中，我们将介绍如何在 LESS 中使用 "Nested Rules"。
基本语法
在 LESS 中使用 "Nested Rules" 时，我们可以在父级规则中嵌套子级规则，如下所示：
.parent {
color: red;
.child {
font-size: 16px;
}
}在上面的代码中，我们定义了一个 .parent 的规则，其中嵌套了一个 .child 的规则。当 LESS 编译成 CSS 后，上述代码将被转化为：
.parent {
color: red;
}
.parent .child {
font-size: 16px;
}可以看到，.child 的规则被嵌套在了 .parent 的规则中，并且编译后的 CSS 代码也反映了这种嵌套关系。
多层嵌套
在 LESS 中，我们可以进行多层嵌套，如下所示：
-- -------------------- ---- -------
------- -
------ ----
------ -
---------- -----
----------- -
------------ -----
-
-
-在上面的代码中，我们定义了一个 .parent 的规则，其中嵌套了一个 .child 的规则，而 .child 规则又嵌套了一个 .grandchild 的规则。当 LESS 编译成 CSS 后，上述代码将被转化为：
-- -------------------- ---- ------- ------- - ------ ---- - ------- ------ - ---------- ----- - ------- ------ ----------- - ------------ ----- -
可以看到，.grandchild 的规则被嵌套在了 .child 的规则中，而 .child 的规则又被嵌套在了 .parent 的规则中。
父选择器 &
在 LESS 中，我们可以使用 & 符号来表示父选择器，如下所示：
.parent {
color: red;
&:hover {
color: blue;
}
}在上面的代码中，我们定义了一个 .parent 的规则，并在其中嵌套了一个 :hover 的规则。在 :hover 规则中，我们使用了 & 符号来表示 .parent 这个父选择器。当 LESS 编译成 CSS 后，上述代码将被转化为：
.parent {
color: red;
}
.parent:hover {
color: blue;
}可以看到，LESS 中的 & 符号被转化成了父选择器，从而生成了正确的 CSS 代码。
总结
在 LESS 中使用 "Nested Rules" 可以让我们更加方便地管理 CSS 代码，使得代码更加清晰、易于理解。通过本文的介绍，相信大家已经掌握了 LESS 中 "Nested Rules" 的基本语法和用法。在实际开发中，我们可以根据需要进行多层嵌套，使用父选择器 & 来表示父级规则，从而更加高效地编写 CSS 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66193eb7d10417a222a179f2