LESS 是一种优秀的 CSS 预处理器，具有许多强大的特性。其中最为常用的一项特性是嵌套语法，它可以非常方便地编写复杂的 CSS 样式。本文将详细介绍 LESS 的嵌套语法实用技巧，帮助读者更好地掌握 LESS 的使用。
为什么要使用嵌套语法
在进行样式编写时，有许多选择，其中一种常见的方式是针对每个选择器编写完整的样式。例如：
-- -------------------- ---- ------- ------- - ----------- ----- -------------- ----- - ------- -- - ---------- ----- ------------ ----- ------------ ----- - ------- - - ---------- ----- ------------ ----- ----------- ----- -
这种方式不仅代码量大，而且可读性不佳，修改样式也很困难。LESS 的嵌套语法可以解决这些问题，提高代码效率和可读性。
基本嵌套语法
LESS 的嵌套语法基于 CSS 选择器的嵌套关系，从而让样式的编写变得简单、直观。例如：
-- -------------------- ---- -------
------- -
----------- -----
-------------- -----
-- -
---------- -----
------------ -----
------------ -----
-
- -
---------- -----
------------ -----
----------- -----
-
-这样可以更直观地看出 .header 包含了 h1 和 p，并且减少了代码的重复。当然，也可以使用嵌套语法简化通用选择器的编写：
-- -------------------- ---- -------
-- -
----------- -----
-- -
-------- -------------
-
- -
------ -----
------- -
------ -----
-
-
-嵌套父元素引用
有时候需要使用父元素的属性，例如 hover 状态的颜色与普通状态不一样，可以使用嵌套选择器的引用，示例如下：
-- -------------------- ---- -------
------- -
-------- -----
----------------- -----
- -
------ -----
------- -
------ -----
----------------- --------------- -- -------
-
-
-在 :hover 中使用 @brand-primary，它将被动态地编译为 .header a:hover 的背景颜色，CSS 示例如下：
.header a:hover {
color: #fff;
background-color: #007acc;
}嵌套属性语法
对于属性嵌套，可能会遇到多个属性值相同的情况，LESS 提供了一种更简便的方法将它们编写在一起，如下所示：
.box-shadow {
box-shadow: 0 10px 20px rgba(0, 0, 0, .5),
0 6px 6px rgba(0, 0, 0, .5);
}可以用下面这种方式：
-- -------------------- ---- -------
----------- -
----------- -
-- --
-- -----
----- -----
------- --
------ ------- -- -- ----
--
-
-- --
-- ----
----- ----
------- --
------ ------- -- -- ----
--
-规则嵌套语法
使用 & 连接两个选择器，可以生成更简洁的 CSS 规则。例如，要为 .btn 添加 :hover 状态：
.btn {
background-color: @brand-primary;
&:hover {
background-color: darken(@brand-primary, 10%);
}
}& 将会被替换为当前选择器（在本例中是 .btn）。
总结
LESS 的嵌套语法可以将样式编写得更加直观、简洁，同时也具有更好的可读性和维护性。通过本文的介绍，你已经掌握了 LESS 的嵌套语法实用技巧，希望这些技巧可以帮助你在前端开发中更加高效地编写代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65aa5024add4f0e0ff3ececd