LESS 是一种动态样式表语言，它扩展了 CSS，并向其添加了动态特性。LESS 通过使用嵌套、变量、混合、函数等功能，使 CSS 更有可读性、可维护性和可重用性。其中，& 符号也是 LESS 中一个重要的符号，在 LESS 中的使用熟练度，取决于你在什么上面使用 & 符号。本文将详细探讨 & 符号在 LESS 中的用法，包括其用途、语法和示例代码，以及在编写代码时应该注意的事项和建议。
& 符号的用途
& 符号在 LESS 中的使用范围较广，其主要用途分为以下两个方面：
1. 父元素引用
LESS 允许我们嵌套 CSS 规则，这使得代码更具有可读性和可维护性。在嵌套规则中的 & 符号，可以让我们引用其父元素。在嵌套规则中，& 符号代表的是父元素。
--- -
-- -
-- -
-------- -
------ -----
----------------- -----
-
-
-
-以上代码中，当 li 元素带有 active 类名时，颜色和背景色将设置为白色和黑色。
2. 选择器嵌套
LESS 同时允许我们嵌套选择器，这使得我们可以更轻松地对目标元素进行样式设置。在选择器嵌套规则中，& 符号代表的是其前面的选择器。
---- -
--------- -
------ -----
----------------- --------
------------- --------
-
-以上代码中，& 符号代表 .btn，.btn-primary 将继承 .btn 的所有样式。
& 符号的语法
& 符号的语法较为简单，只需要注意以下两点：
1. & 符号必须嵌套在规则中
& 符号必须在规则中使用，例如：
---- -
--------- -
------ -----
----------------- --------
------------- --------
-
-如果将 & 符号单独使用，将会出现错误，例如：
--------- -
------ -----
----------------- --------
------------- --------
-以上代码无法被 LESS 解析。
2. & 符号可以与多个选择器结合使用
& 符号还可以和多个选择器结合使用，例如：
------- -
----- -
----------------- ---------------------
-------- -
---------- -----
-
-
-在上述代码中，& 符号与多个选择器结合使用，其中，__ 是一个 BEM 命名规范中的格式。
示例代码
其实，& 符号的用法与复杂程度是可以高到非常高的。但是，为了方便大家理解，下面是简单几个示例代码，供大家参考：
示例代码一
-- -
-------- -
------ -----
----------------- -----
-
-在这个例子中， & 符号引用的是 li 元素，当带有 active 类名的 li 元素出现时，其文本颜色为白色，背景颜色为黑色。
示例代码二
------ -
- -
------ -----
- -
------ -----
------- -
------ -----
-
-
-
-在这个例子中， & 符号引用的是 a 元素，当鼠标移动到 a 元素上时，其文本颜色变为 #555。
示例代码三
---- -
--------- -
------ -----
----------------- --------
------------- --------
------- -
----------------- --------
------------- --------
-
-------- -
----------------- --------
------------- --------
-
------- -
-------- --
----------- - - - ------ ------- ---- ---- -----
-
-
-在这个例子中， & 符号引用的是 .btn-primary，当鼠标悬停在 .btn-primary 上方时，其背景颜色和边框颜色会发生变化。
注意事项和建议
在使用 LESS 中的 & 符号时，需要注意以下几点：
- 熟练掌握 & 符号的使用语法
- 不要滥用 & 符号，否则会让代码过于复杂、难以维护
- 尽量在 LESS 中使用 & 符号所带来的可重用性和可读性特性
- 将模块分离，分别编写不同的模块，并尽可能地保持模块独立，这样有利于减少代码冗余
结论
& 符号在 LESS 中是一种非常有用的工具，它可以让你编写出更好的代码，提高代码的可读性和可维护性。只需要熟练掌握 & 符号的使用方法和注意事项，你就可以将它们用于各种场景中，并创建出更好的 CSS 样式表。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670af1c1d91dce0dc8860ce5