LESS 是一种 CSS 预处理器，它提供了许多方便的语法来简化 CSS 的编写。其中一个重要的特性就是嵌套样式。通过嵌套样式，我们可以更方便地定义子元素的样式，避免了重复书写选择器的繁琐。
本文将详细介绍在 LESS 中如何定义嵌套样式，包括基本语法、高级用法和注意事项。
基本语法
在 LESS 中，嵌套样式的语法非常简单，只需要在父元素的选择器后面加上一个花括号即可。例如：
-- -------------------- ---- -------
------- -
------ -----
---------- -----
------ -
------ -----
---------- -----
-
-上面的代码定义了一个父元素 .parent 和一个子元素 .child，它们分别设置了不同的颜色和字体大小。在 LESS 编译后，生成的 CSS 代码如下：
-- -------------------- ---- ------- ------- - ------ ----- ---------- ----- - ------- ------ - ------ ----- ---------- ----- -
可以看到，LESS 自动将嵌套样式转换成了普通的 CSS 选择器，并添加了父元素的前缀。
除了嵌套样式，LESS 还支持在选择器中使用变量、函数和操作符等高级语法，使得样式的定义更加灵活和可复用。例如：
-- -------------------- ---- -------
------- -----
------- -
------ -------
---------- -----
------ -
------ -------------- -----
---------- -----
-
-上面的代码定义了一个颜色变量 @color，并在父元素和子元素中使用了它。同时，子元素的颜色还使用了 LESS 内置的 darken 函数，将颜色值变暗了 20%。
高级用法
除了基本语法外，LESS 还支持一些高级用法来进一步简化样式的编写。下面介绍几种常用的高级用法。
& 符号
在 LESS 中，& 符号表示当前选择器的引用。通过 & 符号，我们可以方便地定义同级别和父级别的样式。例如：
-- -------------------- ---- -------
---- -
-------- -------------
-------- ---- -----
------- --- ----- -----
------- -
----------------- --------
-
--------- -
----------------- --------
------ -----
------- -
----------------- --------
-
-
-上面的代码定义了一个按钮样式 .btn，它有两个状态：鼠标悬浮和主要样式。通过 &:hover 和 &.primary，我们可以方便地定义这两个状态的样式，而不需要重复书写 .btn 选择器。
~ 符号
在 LESS 中，~ 符号表示相邻兄弟选择器。通过 ~ 符号，我们可以方便地定义相邻兄弟元素的样式。例如：
-- -------------------- ---- -------
----- -
-- -
-------- -------------
------------- -----
-------- -
------------ -----
-
- - -- -
------ -----
-
-
-上面的代码定义了一个列表样式 .list，它包含多个列表项 <li>。通过 &.active，我们可以方便地定义选中状态的样式；而通过 & ~ li，我们可以方便地定义相邻兄弟元素的样式。
{} 符号
在 LESS 中，{} 符号表示属性的块级作用域。通过 {} 符号，我们可以方便地定义多个属性的样式，而不需要重复书写属性名称。例如：
-- -------------------- ---- -------
---- -
-------- -
-
---------- -----
------------ -----
------- -----
------------ -----
-
-
------ -
-
---------- -----
-------- -----
-
-
-上面的代码定义了一个盒子样式 .box，它包含头部和主体两个部分。通过 {} 符号，我们可以方便地定义多个属性的样式，而不需要重复书写属性名称。
注意事项
在使用 LESS 定义嵌套样式时，需要注意以下几点：
- 嵌套样式不应过深，一般不超过 3 层；
- 避免出现冗余选择器，尽量使用 & 符号和高级用法；
- 选择器的顺序应按照 DOM 结构的顺序排列，避免样式覆盖的问题。
示例代码
下面是一个完整的 LESS 示例代码，包含了基本语法和高级用法：
-- -------------------- ---- -------
------- -----
---- -
-------- -------------
-------- ---- -----
------- --- ----- -----
------- -
----------------- --------
-
--------- -
----------------- --------
------ -----
------- -
----------------- --------
-
-
-
----- -
-- -
-------- -------------
------------- -----
-------- -
------------ -----
-
- - -- -
------ -----
-
-
-
---- -
-------- -
-
---------- -----
------------ -----
------- -----
------------ -----
-
-
------ -
-
---------- -----
-------- -----
-
-
-通过以上示例代码，我们可以更好地理解 LESS 中的嵌套样式的语法和用法，进一步提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3755fa941bf713468f30d
