在 Sass 中，我们可以使用变量来存储和重复使用值。而父级变量则是在一个选择器嵌套结构中，子选择器可以访问父级选择器中定义的变量。这种特性可以让我们在编写样式时更加方便和灵活。
为什么要用父级变量
在 Sass 中，我们经常会使用选择器嵌套来组织样式，这样可以让我们的代码更加清晰易读。但是，当我们需要在子选择器中使用父级选择器中定义的变量时，就需要用到父级变量了。
举个例子，假设我们有以下 Sass 代码：
-- -------------------- ---- -------
------- -----
-------- -
----------------- -------
------ -
------ -------
-
-在上面的代码中，我们定义了一个变量 $color，然后在 .wrapper 和 .inner 中都使用了这个变量。但是，如果我们想让 .inner 的背景色和 .wrapper 的背景色不同，但是又想使用相同的颜色变量，该怎么办呢？
这时就可以用到父级变量了。我们可以在 .wrapper 中定义一个变量 $wrapper-color，然后在 .inner 中使用 $wrapper-color，这样就可以保证两个选择器使用的是同一个颜色变量，而又可以分别设置不同的背景色。
-- -------------------- ---- -------
------- -----
-------- -
--------------- -------
----------------- ---------------
------ -
----------------- ---------------
------ -------
-
-Sass 父级变量的用法
在 Sass 中，我们可以用 & 符号来表示父级选择器。例如，如果我们有以下代码：
.wrapper {
&.active {
background-color: red;
}
}当 .wrapper 元素被添加 active 类时，就会应用 background-color: red 样式。
同样的，我们也可以在父级选择器中定义变量，然后在子选择器中使用：
.wrapper {
$wrapper-color: #333;
background-color: $wrapper-color;
&.active {
background-color: blue;
}
}在上面的代码中，我们在父级选择器 .wrapper 中定义了一个变量 $wrapper-color，然后在 .wrapper.active 中使用了不同的背景色。这样可以让我们在保持样式一致性的同时，又可以灵活地应对不同的情况。
示例代码
-- -------------------- ---- -------
------- -----
-------- -
--------------- -------
----------------- ---------------
-------- -
----------------- -----
-
------ -
----------------- ---------------
------ -------
-
-在上面的代码中，我们定义了一个变量 $color，然后在 .wrapper 中定义了一个变量 $wrapper-color，并应用了父级选择器的特性。在 .wrapper.active 中使用了不同的背景色，而在 .inner 中使用了父级变量 $wrapper-color。
结论
Sass 父级变量是一个非常有用的特性，可以让我们在编写样式时更加方便和灵活。通过使用父级变量，我们可以让样式更加统一，又可以应对不同的情况。因此，在编写 Sass 样式时，我们应该充分利用父级变量的特性，让代码更加简洁、易读、易维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676bb7a078388e33bb263ab9