LESS 是一种 CSS 预处理语言，它增加了很多 CSS 缺失的功能，比如变量、嵌套、Mixin 等。LESS 嵌套是其中一种强大的功能，允许我们组织样式的结构，并可读性更强。但是，在 LESS 的嵌套规则中使用 class 名并不直观，这篇文章将探讨如何在 LESS 嵌套规则中使用 class 名，并提供一些示例代码。
基本语法
在 LESS 中，我们可以使用 & 符号来表示当前选择器的父选择器。我们可以在嵌套规则中使用父级选择器与当前选择器的组合，以便修改样式的细节。例如，
.parent {
.child {
// ...
}
}编译后的结果如下：
.parent .child {
/* ... */
}我们可以看到，.child 标签被嵌套在 .parent 中，LESS 会将两个选择器组合起来，生成与 CSS 相同的样式。
LESS 的嵌套规则允许我们在子元素选择器后使用 class 名。例如，
.parent {
.child.active {
// ...
}
}编译后的结果如下：
.parent .child.active {
/* ... */
}在上面的例子中，.child.active 表示 .child 元素中同时拥有 .active class 的所有元素。使用此方法可以将样式定义在嵌套的规则中。但是也需要注意，此方法只适用于使用此 class 名的元素，而不能定义在 .parent .child 选择器中没有使用 .active class 的所有元素。
嵌套选择器
我们还可以使用 LESS 的嵌套规则来定义单独的选择器，以便在样式表中使用相同的 class 名称。例如，
-- -------------------- ---- -------
------- -
----- -
-- ---
-
------- -
-- ---
-
-编译后的结果如下：
.parent.big {
/* ... */
}
.parent.small {
/* ... */
}在上面的例子中，.parent 选择器会被添加到 .big 和 .small 选择器中，以便在不同的元素上应用不同的样式。在这种情况下，我们可以不使用 .parent 选择器和其他元素一起。
示例代码
下面是一个示例代码，展示如何在 LESS 嵌套规则中使用 class 名。
-- -------------------- ---- -------
------- -
------ -
-- ---------
----------------- -----
-------- ------
-------- -----
------- -
-- --------
----------------- --------
-
-------- -
-- --------
----------------- -----
------ -----
-
-
-编译后的结果如下：
-- -------------------- ---- ------- ------- ------ - ----------------- ----- -------- ------ -------- ----- - ------- ------------ - ----------------- -------- - ------- ------------- - ----------------- ----- ------ ----- -
在上面的例子中，我们定义了 .parent 中的 .child 元素样式，并且在 .child 后面使用了 CSS 的伪类 :hover，定义了元素的悬浮样式，还使用了 .active class 名，为元素打上了选中样式。而在使用嵌套规则时，我们可以在定义样式时使用父级选择器组合，以便更改样式的细节。
总结
在 LESS 中，使用嵌套规则来定义样式是一个很好的习惯，也是一种非常强大的技术，使代码可读性更高。我们在嵌套规则中可以使用 class 名，在不同的元素中应用不同的样式。但是，需要注意的是在使用 .active 类名时，只适用于使用该 class 名的元素，而不能应用到 .parent .child 选择器中没有使用 .active class 的所有元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482c36b48841e989421f17f