LESS 是一种动态样式表语言，它像 CSS 一样编写样式，但支持嵌套、变量、函数等功能。嵌套是 LESS 最常用的一个特性，它可以让 CSS 代码更加简洁易懂。
在 LESS 中，可以使用嵌套语法来表达 HTML 中元素的嵌套关系。这样就可以避免重复书写 class 名称，减少代码量和出错的可能性。下面我们来看一些例子。
父子选择器
父子选择器代表元素的嵌套结构，可以用一个选择器来代表其他选择器的父元素。比如以下 HTML 结构：
<div class="container"> <h1>Title</h1> <p>Content1</p> <p>Content2</p> </div>
可以用 LESS 代码这样表示：
-- -------------------- ---- -------
---------- -
-- -
---------- -----
------ -----
-
- -
---------- -----
------ -----
------- - -- ----
------ -----
-
-
-在上面的代码中，.container 是父选择器，h1 和 p 是子选择器。& 表示当前选择器对应的父选择器，用来代替 container。&:hover 表示鼠标放在 p 元素上时改变颜色。
伪类和伪元素
伪类和伪元素是一种表示元素状态或位置的 CSS 选择器，常用的有 :hover、:active、:focus、::before、::after 等。
在 LESS 中，可以像使用普通的 class 一样给伪类和伪元素添加样式。例如：
-- -------------------- ---- -------
- -
------ -----
------- -
------ -----
-
--------- -
-------- ---
-------- -------------
------ -----
------- -----
----------- -----
-
-------- -
-------- ----
------------ ----
-
-上面的例子中，&:hover 表示 a 元素在鼠标悬浮时的状态，&::before 表示在 a 元素前面插入一个元素，在它后面插入一个箭头。
作用域和继承
在 LESS 中，嵌套语法还可以实现作用域和继承。例如：
-- -------------------- ---- -------
------ -
------- --- ----- ----
------ -
------ ----
-
----------- -
------------ -----
-
-在上面的例子中，.title 是 error 元素下的子元素，.important 表示 error 元素同时具有 important 和 error 两个 class，所以它的样式继承了 error 的边框，并且设置了字体加粗。
总结
LESS 的嵌套语法可以让 CSS 代码更加简洁，适合用在大型项目中。但过度使用嵌套语法会影响代码的可读性，应该在实际开发中合理使用。将 HTML 元素的嵌套结构转换成 CSS 的嵌套结构，可以更好地表达页面的结构和布局。
希望本篇介绍 LESS 嵌套语法的文章可以对前端开发的同学有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b5d67cadd4f0e0ffe93fed