LESS 是一种动态样式语言，它扩展了 CSS 的语法，使得我们能够更加方便地编写和维护 CSS 样式。LESS 不仅支持基本的变量、函数、混合宏等特性，还提供了一些强大的控制语句，使 CSS 的编写更加易读、易扩展和易维护。其中，控制代码嵌套层级的技巧是 LESS 中的一大特点，本文将详细介绍 LESS 中控制代码嵌套层级的技巧，并提供一些示例代码和指导意义。
基本使用
LESS 中的代码嵌套层级可以让 CSS 的编写更加有层次、更加清晰、易读。下面是一个简单的例子：
-- -------------------- ---- -------
-- ---- ----
---- -
------ ------
------- ------
----------------- -----
------- --- ----- -----
-- ---- ---- ------
------ -
---------- -----
------------ -----
----------- -------
-
-- ---- ---- --------
-------- -
-------- -----
------------ ------
-
-上述 LESS 代码中，.box 是一个容器类样式，它包含了 .title 和 .content 两个子元素的样式定义。在 LESS 中，我们可以使用 {} 来定义一个选择器的样式内容，并使用 .className 来表示一个类选择器。在 .box 的 {} 中，我们又定义了 .title 和 .content 两个子元素的样式内容，它们分别使用了 .box .title 和 .box .content 选择器来表示它们被 .box 父元素包含。
嵌套引用
除了基本的嵌套层级，LESS 还提供了嵌套引用的特性，使得我们能够更加方便地扩展已有样式的定义。下面是一个简单的例子：
-- -------------------- ---- -------
-- ---- ----
---- -
------ ------
------- ------
----------------- -----
------- --- ----- -----
-- ---- ---- ------
------ -
---------- -----
------------ -----
----------- -------
-
-- ---- ---- --------
-------- -
-------- -----
------------ ------
-
-- ---- ------ ----
---------- -
-------
------ ----
-
-上述 LESS 代码中的 .title-red 是一个新增的类样式，它的样式定义使用了 .title; 来嵌套引用了 .title 中的样式内容，并额外定义了 color: red; 的样式特性。在 LESS 中，我们可以使用 . 来引用已有选择器的样式，并使用新的类选择器来扩展它们的样式特性。
层次控制
LESS 还提供了层次控制的特性，使得我们能够更加灵活地控制样式表的层次关系。下面是一个简单的例子：
-- -------------------- ---- -------
-- ---- ----
---- -
------ ------
------- ------
----------------- -----
------- --- ----- -----
-- ---- ------
------ -
---------- -----
------------ -----
----------- -------
---------- - -
---------------- ----------
-
-
-- ---- --------
-------- -
-------- -----
------------ ------
---------- - -
------ -----
-
-
-- ---- ---------- --
------- -
-- ---------- ------ - -------- - ----- --
------ - ------ ----- -
-------- - ----------------- ----- -
-- -------
-------- -
-------- -----
----------- - - --- --- ----------
-
-
-上述 LESS 代码中，我们使用了符号 & 来引用当前选择器的父级选择器，并利用层次结构将样式 .box:hover .title 和 .box:hover .content 嵌套到 &:hover {} 中定义的样式内容中，并使用不同的样式属性来控制它们的 hover 状态。另外，我们还使用 &::focus 来控制当前样式 .box 的键盘焦点框的样式。
总结
LESS 中控制代码嵌套层级的技巧使 CSS 的编写更加易读、易扩展和易维护，我们可以使用 {} 来定义选择器的样式内容、使用 .className 来表示一个类选择器、使用 . 来引用已有选择器的样式、使用 & 来引用当前选择器的父级选择器、使用层次结构来控制样式表的层次关系等。在实际项目中，我们可以根据需要结合控制语句和深度嵌套来编写易读、易维护的 CSS 样式表，提高工作效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6470fe79968c7c53b0eff230