什么是 LESS
LESS 是一种 CSS 预处理器，它扩展了标准 CSS 的语法，使得我们能够使用变量、函数、嵌套等方式来写更加灵活、易于维护的 CSS 代码。
嵌套语法的作用
嵌套语法是 LESS 中最常用的一个特性，它可以让我们更加方便地组织代码，使代码结构更加清晰易懂。使用嵌套语法可以 reducing the amount of code we need to write。
如何使用嵌套语法
基本嵌套
我们可以将嵌套规则用在元素中，以 group several selectors 到一起。下面是一个例子：
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-
-- -
-------- -------------
- -
-------- ------
-------- --- -----
---------------- -----
-
-
-在这个例子中，我们将 ul 和 li 标签的 CSS 属性都放在了 nav 标签内。这样做的好处是，我们可以通过查看代码结构来清楚地看到哪些元素之间存在联系。
父元素的引用符号 &
在 LESS 中，我们可以使用 & 符号引用父元素。很多时候，我们需要在某个状态下改变某个元素的样式，而这个状态可能和父元素相关。此时我们可以使用 & 符号引用其父元素，来达到改变子元素样式的目的。下面是一个例子：
a {
color: #f00;
&:hover {
color: #fff;
}
}在这个例子中，当鼠标放在 a 元素上时，a 元素的颜色会变成白色。因为 & 符号代表的就是 a 元素本身。
多层嵌套
除了基本嵌套和使用 & 符号外，我们还可以嵌套多层元素。下面是一个例子：
-- -------------------- ---- -------
---------------- -
-------------- ----
---- -
----------------- -----
------ -----
------ -
---------- -----
-------------- -----
-
-
-在这个例子中，我们嵌套了三层元素。最外层是一个类名，中间层是一个带有背景色和字体颜色的盒子，内层是一个标题。这样的代码结构使得我们可以很方便地找到需要调整的 CSS 属性。
总结
以上就是 LESS 中嵌套语法的基本用法，通过合理地使用嵌套语法，我们可以让代码更加易读、易维护。让我们在编写 CSS 代码时展现出优雅的 style。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6477613f968c7c53b03e0b58