SASS 中的变量作用域
SASS 是一种 CSS 预处理器，它提供了很多 CSS 不支持的特性，如变量、嵌套、继承等。其中，变量是 SASS 最基本也是最常用的特性之一，它能够帮助开发者更好地组织和管理 CSS 代码。但是，在 SASS 中，变量作用域是一个非常重要的概念，也是新手容易混淆的地方。
变量作用域是指一个变量在代码中的可见范围。在一些编程语言中，变量作用域大多遵循词法作用域（也称为静态作用域）或动态作用域。但是，在 SASS 中，变量作用域有一些自己的规则。
定义变量
在 SASS 中，我们可以使用 $ 符号来定义变量，如下所示：
$primary-color: #333;
这里定义了一个名为 primary-color 的变量，它的值是 #333。
全局变量
在 SASS 中，变量有两种作用域：全局作用域和局部作用域。如果在样式块之外定义变量，变量就具有全局作用域。全局变量可以在代码的任何地方访问，例如：
$primary-color: #333;
body {
background-color: $primary-color;
}在上面的示例中，$primary-color 定义为全局变量，可以在 body 标签内使用。
局部变量
如果在样式块内部定义变量，该变量就具有局部作用域。局部变量只能在定义它们的样式块内部使用，例如：
.text {
$primary-color: #333;
color: $primary-color;
}在上面的示例中，$primary-color 定义为局部变量，只能在 .text 样式块内部使用。
变量的优先级
当全局变量和局部变量的名称相同时，局部变量会覆盖全局变量，例如：
$primary-color: #333;
.text {
$primary-color: #f00;
color: $primary-color;
}在上面的示例中，局部变量 $primary-color 的值会覆盖全局变量， .text 中的文本颜色将被设置为红色，而不是全局变量中定义的蓝色。
全局变量的覆盖
SASS 还提供了一个很有用的特性，即 !global 标志。当在局部作用域中使用该标志时，变量的作用域将被提升到全局作用域。例如：
.text {
$primary-color: #f00 !global;
}
body {
background-color: $primary-color;
}在上面的示例中，$primary-color 只是一个局部变量，但是 !global 标志将其提升为全局变量，从而可以在 body 样式块内使用。
总结
- 在 SASS 中，变量作用域有全局作用域和局部作用域两种。
- 全局变量可以在代码的任何地方访问，而局部变量只能在定义它们的样式块内部使用。
- 局部变量会覆盖全局变量，但可以使用 !global 标志将其提升为全局变量。
变量作用域对于 SASS 代码的组织和管理非常重要。只有深入了解了它们，才能写出更加可读和可维护的 SASS 代码。
示例代码
-- -------------------- ---- ------- --------------- ----- ----- - ----------------- ----- ------ --------------- ----------------- ----------------- - ---- - ------ --------------- ----------------- ----- - ---------- - --------------- ---- -------- ------ --------------- - ---- - ----------------- --------------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f9db2cf6b2d6eab3135b1a