SASS 中如何使用 & 符号
SASS 是 CSS 的一种预处理语言，极大地提高了 CSS 的编写效率，其中 & 符号在 SASS 中扮演着非常重要的角色，本文介绍如何在 SASS 中使用 & 符号。
- SASS 中 & 符号的基本用法
& 符号在 SASS 中表示“父选择器”，例如：
---- -
--------- -
----------------- -----
-
-编译后：
------------ - ----------------- ----- -
在这个例子中，& 符号代表了.btn 父选择器，将 btn 和 primary 两个字符串连接起来，生成了最终的选择器 .btn-primary。
- & 符号的嵌套用法
& 符号可以用在嵌套选择器当中，例如：
---- -
------- -
----------------- ----
-
-编译后：
---------- - ----------------- ---- -
这个例子中，& 符号用在了嵌套选择器中，表示了.btn:hover 这个选择器。
- & 符号的多层嵌套用法
& 符号还可以用在多层嵌套选择器中，例如：
----- -
-- -
------- -
----------------- -----
-
-------- -
----------------- -----
-
-
-编译后：
----- -------- - ----------------- ----- - ----- --------- - ----------------- ----- -
这个例子中，& 符号用在了多层嵌套选择器中，表示了 .menu li:hover 和 .menu li.active 两个选择器。
- & 符号的指令用法
& 符号还可以用在 SASS 指令中，例如：
---- -
------ ------ --- ----------- ------ -
------- -
---------- -----
-
-
-编译后：
------ ------ --- ----------- ------ -
---------- -
---------- -----
-
-这个例子中，& 符号用在了 @media 指令中，表示了 .btn-small 这个选择器。
- & 符号的特殊用法
& 符号还可以用在一些特殊的场景中，例如：
------- -
------ -
-- --- - -- --
----------------- -------
-
-------- -
------ -
-- -- - -- --
----------------- -----
-
-
-编译后：
------- ------ - ----------------- ------- - -------------- ------ - ----------------- ----- -
这个例子中，& 符号用在了一些特殊的场景中，例如表示 .parent 或者 .parent.active 这两个选择器。
- 总结
& 符号在 SASS 中扮演了非常重要的角色，可以用在基本用法、嵌套用法、多层嵌套用法、指令用法、特殊用法等多种场景中，可以帮助我们快速地生成复杂的选择器。使用 & 符号需要注意的是，在某些情况下不使用 & 符号也可以达到相同的效果，需要根据具体情况选择是否使用 & 符号。
示例代码：
---- -
--------- -
----------------- -----
-
------- -
----------------- ----
-
------ ------ --- ----------- ------ -
------- -
---------- -----
-
-
------ -
-- --- - -- --
----------------- -------
-
-------- -
------ -
-- -- - -- --
----------------- -----
-
-
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6549beb77d4982a6eb3fea0a