CSS 伪类选择器是用来匹配文档中特定状态的元素，例如:hover、:active、:focus等，它们可以让我们在用户与页面交互时实现更多效果，但有时候我们需要更多的控制权来定制这些状态样式，这时候 SASS 可以帮助我们增强 CSS 伪类选择器。
SASS 的 @at-root 指令
在 SASS 中，我们可以使用 @at-root 指令来控制 CSS 伪类选择器的作用域，从而实现更加灵活的样式控制。
-- -------------------- ---- -------
-- ---------
------- -
------- --- ----- -----
-------- -----
-- -- -------- -- ------ ----
-------- ------- -
----------------- --------
-
-在上面的代码中，我们使用 @at-root 指令将:hover 选择器的作用域提升到了最外层，这样就可以让:hover 的样式作用在 .parent 元素上了。
SASS 的 @extend 指令
除了 @at-root 指令外，SASS 还提供了 @extend 指令来增强 CSS 伪类选择器的功能。
-- -------------------- ---- -------
-- --------
---- -
-------- -------------
-------- ---- -----
------- --- ----- -----
----------- -------
-- -- ------ ----
------- -
----------------- --------
-
-
-- --------
------------ -
------- -----
----------------- --------
------ -----
-在上面的代码中，我们使用 @extend 指令将.btn 的样式扩展到了.btn-primary 上，这样就可以让.btn-primary 继承.btn 的:hover 状态样式了。
SASS 的 @content 指令
除了 @at-root 和 @extend 指令外，SASS 还提供了 @content 指令来增强 CSS 伪类选择器的可复用性。
-- -------------------- ---- -------
-- ---- -----
------ -------------- -
-------- -------------
-------- ---- -----
------- --- ----- -----
----------- -------
----------------- ----------
------ -----
-- -- -------- -- ------ ----
------- -
---------
-
-
-- -- ----- ----
---- -
-------- ------------ -
----------------- --------
-
-在上面的代码中，我们使用 @mixin 定义了一个 btn mixin，它接受一个 $bg-color 参数，并在其中定义了基础样式和 :hover 状态样式，然后在 .btn 样式中使用 @include 调用了这个 mixin，并使用 @content 插入了一个新的 :hover 状态样式。
总结
通过使用 @at-root、@extend、@content 等 SASS 指令，我们可以在 CSS 伪类选择器中实现更加灵活和可复用的样式控制。这些技巧可以帮助我们提高前端开发效率，同时也可以让我们的代码更加清晰和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65739222d2f5e1655dcaf411