在前端开发中，我们经常需要根据不同的状态去更改元素的样式，例如 hover、active、disabled 等。SASS 作为一种 CSS 预处理器，提供了一些方便的语法和工具，使处理不同状态的样式变得更加简单和可维护。
使用 & 符号
在 SASS 中，可以使用 & 符号来引用父选择器。这个符号非常有用，尤其是当我们需要根据不同的状态去修改样式时。下面通过一个简单的例子来演示：
-- -------------------- ---- -------
---- -
----------------- -----
------- -
----------------- ----
-
-------- -
----------------- ------
-
-在上面的例子中，我们定义了一个 .btn 的类。当鼠标悬浮到 .btn 元素上时，它的背景色会变成红色；当元素被点击时，背景色会变成绿色。这个例子非常简单，但它展示了 & 符号的使用方法：可以使用 & 符号来引用父选择器，从而修改样式。
使用 placeholder
SASS 还提供了一种非常棒的工具：placeholder。它类似于 CSS 的类选择器，但是却不会污染 HTML，而且可以在任何地方定义。
下面我们通过一个例子来演示如何使用 placeholder 定义不同状态的样式：
-- -------------------- ---- -------
---------- -
----------------- ----
-
----------- -
----------------- ------
-
---- -
----------------- -----
------- -
------- -----------
-
-------- -
------- ------------
-
-在上面的例子中，我们使用 % 符号来定义 placeholder 类。它们不会输出到 CSS 文件中，而是被视为可以在其他选择器中扩展的占位符。
在 .btn 类中，我们扩展了 %btn-hover 和 %btn-active 占位符，并在相应的状态下修改了背景颜色。这样做的好处是，我们可以在任何地方定义占位符，并在任何地方重复使用它们，从而减少了代码重复。
使用变量
在 SASS 中，我们还可以使用变量来定义不同状态的样式。变量使得代码具有可维护性、可重用性和可读性。下面我们通过一个例子来演示如何使用变量：
-- -------------------- ---- -------
------------- ----
-------------- ------
---- -
----------------- -----
------- -
----------------- -------------
-
-------- -
----------------- --------------
-
-在上面的例子中，我们定义了两个变量 $color-hover 和 $color-active，分别表示鼠标悬浮和点击时的颜色。这样，我们可以在任何地方重用这两个变量，提高代码的可维护性。
总结
在本文中，我们介绍了 SASS 中处理不同状态的样式的三种方法：使用 & 符号、使用 placeholder 和使用变量。这些方法都可以使得样式修改变得简单和可维护。在实际开发中，我们需要根据具体情况选择不同的方法，从而使得代码更具可读性和可维护性。
示例代码如下：
-- -------------------- ---- -------
---- -
----------------- -----
------- -
----------------- ----
-
-------- -
----------------- ------
-
-
---------- -
----------------- ----
-
----------- -
----------------- ------
-
---- -
----------------- -----
------- -
------- -----------
-
-------- -
------- ------------
-
-
------------- ----
-------------- ------
---- -
----------------- -----
------- -
----------------- -------------
-
-------- -
----------------- --------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64522449675af4061b5cb7d7