伪元素（Pseudo-Elements）是一种前端开发中常用的技术，它能够让我们在不增加 DOM 元素的情况下实现复杂的样式效果。在 SASS 中，我们可以通过使用 &::before 和 &::after 来定义伪元素的样式。
定义伪元素样式
在 SASS 中，我们可以使用 &::before 和 &::after 来定义伪元素的样式，它们分别对应元素的 ::before 和 ::after 伪元素。下面是一个使用 &::before 定义箭头图标样式的例子：
-- -------------------- ---- -------
------ -
--------- ---------
--------- -
-------- ---
--------- ---------
---- ----
----- --
---------- -----------------
------ -----
------- -----
----------- --- ----- -----
------------- --- ----- -----
---------- ---------------
-
-在这个例子中，我们首先定义了一个 .arrow 类，并设置了相对定位。然后，我们使用 &::before 来定义伪元素的样式，设置了其内容为空、绝对定位、距离顶部距离为其父元素的 50%，距离左侧为 0，通过 transform 将其上移。最后，我们设置了箭头的样式，通过旋转达到箭头的效果。
继承父元素类名
在 SASS 中，我们可以使用 @at-root 语句来继承父元素的类名。例如，我们可以在 .button 类中定义伪元素样式，并继承 .button 类名来对伪元素的样式进行设置：
-- -------------------- ---- -------
------- -
--------- ---------
-------- -----
----------------- -----
------ -----
-------- -------------
--------- -
-------- ------------- - -
----------------- ------------
------- --- ----- -----
------ -----
-
-------- ---
--------- ---------
---- ----
----- --
---------- -----------------
------ -----
------- -----
----------- --- ----- -----
------------- --- ----- -----
---------- ---------------
-
-在这个例子中，我们定义了一个 .button 类，并在其中定义了伪元素样式。我们使用 @at-root 语句来继承 .button 类名，并对伪元素的样式进行设置。这样，我们就可以实现不同样式的按钮，只需在 HTML 中将不同的类名添加到对应的按钮上就行了。
总结
SASS 中支持 &::before 和 &::after 来定义伪元素的样式，可以极大地方便我们开发复杂的样式效果。我们可以通过继承父元素的类名来对伪元素的样式进行设置，使得我们能够在不增加 DOM 元素的情况下实现不同样式的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458b567968c7c53b0b07b78