LESS 是一种动态样式语言，它扩展了 CSS 的语法，使得开发者可以更加灵活地处理样式。在 LESS 中，“&” 符号有着非常重要的作用，可以帮助我们优化样式的编写。
常用场景
1. 父选择器引用
在 LESS 中，如果我们需要将父级元素的样式与子级元素连写在一起，可以使用 “&” 符号来引用父选择器。
.parent {
background-color: #FFF;
&:hover {
background-color: #CCC;
}
}在上面的代码中，“&:hover” 的选择器实际上引用了 “.parent:hover”，这样就可以避免重复书写。
2. 嵌套选择器
如果我们需要使用嵌套选择器，可以使用 “&” 符号来引用当前选择器。
.parent {
background-color: #FFF;
.child {
&.active {
background-color: #CCC;
}
}
}在上面的代码中，“&.active” 的选择器实际上引用了 “.parent .child.active”，这样就可以更加方便地进行嵌套选择器的编写。
3. 伪元素和伪类
在 LESS 中，我们可以使用 “&” 符号来引用伪元素和伪类的选择器。
.link {
&:hover {
text-decoration: underline;
&::after {
content: '（点击我）';
}
}
}在上面的代码中，“&::after” 的选择器实际上引用了 “.link:hover::after”，“&:hover” 的选择器实际上引用了 “.link:hover”，这样就可以非常方便地编写伪元素和伪类的样式。
示例代码
下面是一个具体的例子，演示了如何在 LESS 中使用 “&” 符号来优化样式的编写。
-- -------------------- ---- -------
---- -
----------------- -----
------ -----
------- --- ----- -----
-------- --- -----
---------- -----
----------- -------
---------------- -----
-------- -------------
-------------- --
------------ ----
-------- ------- -
----------------- -----
---------------- -----
-------- -----
-
-在上面的代码中，我们使用了 “&:hover, &:focus” 来引用 “.btn:hover, .btn:focus”，避免了重复书写样式。这样，我们就可以非常方便地编写样式，避免了样式的冗余。
结论
在 LESS 中，“&” 符号有着非常重要的作用，可以帮助我们优化样式的编写，避免了样式的冗余。使用 “&” 符号，我们可以更加方便地进行嵌套选择器的编写，引用父选择器、伪元素和伪类的选择器，提高了样式的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672efdf4eedcc8a97c8bd8ae