SASS 中使用！global 的作用及其应用场景
在 SASS 中，!global 是一个特殊的关键词，它可以帮助我们在全局范围内定义和修改变量值，同时可以避免变量作用域范围的限制，从而提高代码的灵活性和可维护性。
一、!global 的作用
当我们在 SASS 中定义一个变量时，它的作用域通常只在当前的代码块中有效。例如：
-- -------------------- ---- ------- ------- ----- --- - ------- ----- ----------------- ------- - - - ------ ------- -
在上述代码中，我们定义了一个名为 $color 的变量，并在 div 块中重新定义了它的值，用来设置背景颜色。然而，在 p 块中使用 $color 变量时，它的值仍然是 #f00，而不是在 div 块中重新定义的 #0f0。
这是因为在 SASS 中，变量的作用域范围默认是局部的（local），在代码块之外无法访问。而 !global 关键词，则可以让我们将变量的作用域定义为全局（global），从而可以在任何地方都访问该变量，例如：
-- -------------------- ---- ------- ------- ----- --- - ------- ---- -------- -- - ------ ------- ----------------- ------- - - - ------ ------- -
在上述代码中，我们将 $color 变量的作用域定义为全局，并将其值修改为 #0f0。这样，无论在哪个代码块中访问该变量，它的值始终是 #0f0。
二、!global 的应用场景
!global 关键词的应用场景比较灵活，它可以帮助我们实现以下代码效果：
- 在媒体查询中修改变量值
通常，我们在编写响应式 Web 设计时，需要根据不同的屏幕大小设置不同的样式。而 !global 关键词可以让我们在媒体查询中修改变量值，从而实现根据屏幕大小来动态调整样式的效果。
例如：
-- -------------------- ---- ------- ------ ----- ---- - ---------- ------ - ------ ------ --- ----------- ------ - ------ ---- -------- -
在上述代码中，我们定义了一个名为 $size 的变量，并在 body 中使用它设置字体大小。然后，在媒体查询中，我们使用 !global 关键词将 $size 变量的作用域定义为全局，并将其值修改为 18px。这样，在哪个代码块中访问该变量，它的值始终是被修改后的值。
- 实现主题样式切换
有时候，我们需要在网站中实现主题样式切换功能，此时使用 !global 关键词可以让我们在全局范围内修改变量值，从而实现主题样式的切换。
例如：
-- -------------------- ---- -------
--------------- -----
-- ----
---- -
----------------- ------
------ -----
- -
------ ---------------
-
-
-- ----
--------- -
----------------- -----
------ ------
- -
------ -------------- -------- -- - -------------- -------
-
-在上述代码中，我们首先定义了一个名为 $primary-color 的变量，并在默认主题中使用它来设置链接的颜色。然后，在暗黑主题中，我们使用 !global 关键词将 $primary-color 变量的作用域定义为全局，并修改它的值。这样，即使在链接代码块中访问该变量，它的值也始终是被修改后的值，从而实现主题样式的切换。
三、总结
!global 关键词是 SASS 中非常方便的一个关键词，它可以帮助我们在全局范围内定义和修改变量值，从而增强 SASS 的灵活性和可维护性。但是，过度使用 !global 也可能会导致代码可读性下降和混乱的作用域关系，因此我们在使用 !global 时需要注意适度，以免影响代码质量和维护性。
示例代码：https://codepen.io/gaolei/pen/Pojbmad
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6644430fd3423812e4223f33