在前端开发中，我们经常需要在 CSS 中嵌套样式，这有时会导致选择器嵌套过深，使代码难以阅读和维护。为了解决这个问题，SASS 增加了父级选择器 "&"，这个选择器可谓是 SASS 的一大利器，具有很高的灵活性，可以优化代码，提高开发效率。
"&" 的基础使用
在 SASS 中，我们可以使用 "&" 来表示父级选择器，它可以让选择器在不同的嵌套层次中保持正确的上下文关系，从而不需要额外冗余的类名或 ID 去指定样式的父级。
例如，我们在 SASS 中这样写 CSS，其中 "&" 表示当前选择器的父级：
-- -------------------- ---- -------
---- -
-------- -----
----------- -----
------- -
----------- -----
-
-------- -
------ ----
-
----- -
---------- -----
------ -----
-
-在编译后的 CSS 中，上面的代码被转换成如下形式：
-- -------------------- ---- ------- ---- - -------- ----- ----------- ----- - ---------- - ----------- ----- - ----------- - ------ ---- - ---- ----- - ---------- ----- ------ ----- -
通过上述代码，我们可以发现，在 SASS 中 "&" 的作用主要是为了简化 CSS 代码，并能够正确地传递选择器的上下文关系。
"&" 的高级使用
除了上述基础用法，SASS 父级选择器 "&" 还有许多其他的高级玩法，包括以下几种常见用法。
1. 用于指定伪元素
在 CSS 中，如果我们需要为一个元素的伪元素设置样式，可以使用 "::before" 或 "::after" 来指定伪元素。而在 SASS 中，我们可以使用 "&" 来指定父级选择器，并在后面添加伪元素，如下所示：
-- -------------------- ---- -------
---- -
-------- -----
----------- -----
--------- -
-------- ---
------ -----
------- -----
-------- -------------
----------------- ---------------------------
-
-------- -
-------- ---
------ -----
------- -----
-------- -------------
----------------- --------------------------
-
-上述代码会被编译成如下 CSS：
-- -------------------- ---- ------- ---- - -------- ----- ----------- ----- - ------------ - -------- --- ------ ----- ------- ----- -------- ------------- ----------------- --------------------------- - ----------- - -------- --- ------ ----- ------- ----- -------- ------------- ----------------- -------------------------- -
2. 用于选择器循环
SASS 可以像编程语言一样进行循环，可以使用 @for 循环来生成一组选择器，然后使用 "&" 与遍历变量的值动态生成选择器。
例如，我们可以通过以下方式从 1 到 6 生成选择器：
-- -------------------- ---- -------
---- -- ---- - ------- - -
----------- -
------ ---- - ------
------- ---- - ------
--------- -
----------- ----
------ ------
-
-
-上述代码会被编译成如下 CSS：
-- -------------------- ---- ------- ------- - ------ ----- ------- ----- - --------------- - ----------- ---- ------ ------ - ------- - ------ ------ ------- ------ - --------------- - ----------- ---- ------ ------ - ------- - ------ ------ ------- ------ - --------------- - ----------- ---- ------ ------ - ------- - ------ ------ ------- ------ - --------------- - ----------- ---- ------ ------ - ------- - ------ ------ ------- ------ - --------------- - ----------- ---- ------ ------ - ------- - ------ ------ ------- ------ - --------------- - ----------- ---- ------ ------ -
3. 用于多种状态下的样式设置
在有些情况下，我们需要为一个元素设置多种不同状态的样式效果，比如正常、悬停、选中等。这时，我们可以使用 "&" 来进行分组，方便我们设置状态时的样式。
下面是一个常见的例子，我们可以使用 "&" 来设置不同状态下的 hover 样式和 selected 样式：
-- -------------------- ---- -------
---- -
----------------- -----
------ -----
------- --- ----- -----
------- -
----------------- --------
-
--------
-------- -
-------- --
----------- - - - --- ------- -- -- -----
-
---------- -
----------------- --------
------ -----
------- -
----------------- --------------- -----
-
-
-上述代码会被编译成如下 CSS：
-- -------------------- ---- ------- ---- - ----------------- ----- ------ ----- ------- --- ----- ----- - ---------- - ----------------- -------- - ----------- ----------- - -------- -- ----------- - - - --- ------- -- -- ----- - ------------- - ----------------- -------- ------ ----- - ------------------- - ----------------- -------- -
通过上述例子，我们可以看到使用 "&" 可以更好地控制选择器的上下文，提高了代码的可读性和维护性。
总结
SASS 父级选择器 "&" 是一个非常强大的工具，它能够帮助我们写出更加简洁、高效的 CSS 代码。在实际开发中，我们可以根据需要结合上述高级使用方式，灵活地应用于项目开发中，从而更好地提高开发效率，同时也增加了代码的可维护性。
希望以上介绍能够帮助你更好地掌握 SASS 父级选择器 "&" 的妙用，在实际项目开发中应用起来更加灵活、高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e82e8cf6b2d6eab33a94bf