在前端开发中，CSS 是不可或缺的一部分，而 SASS 是 CSS 的一种预处理语言。SASS 以其高度的灵活性和可重用性而受到广泛的欢迎，而变量是 SASS 中非常基础和核心的部分，也是用来定义和代替常用的值和属性的最常用的方法之一。但是，在使用变量时，就需要考虑到其变量作用域的问题。
变量作用域
SASS 变量的作用域指的是一个变量可以在哪些范围内被引用和使用。在 SASS 中，有全局变量和局部变量，它们之间在作用域方面的区别是很重要的。
全局变量
全局变量是在 SASS 文件顶层定义的变量，这些变量可以在整个 SASS 文件内任何地方使用，包括在任何嵌套层级内。例如：
-- -------------------- ---- ------- --------------- ----- ---- - ----------------- --------------- - -- - ------ --------------- -
在上面的示例中，$primary-color 是一个全局变量，可以在整个 SASS 文件内使用。在这个例子中，我们用它定义了背景颜色和标题颜色。
局部变量
局部变量只能在定义它们的嵌套块内使用。例如：
-- -------------------- ---- -------
---- -
--------------- -----
----------------- ---------------
-- -
------ ---------------
-
-在上面的示例中，$primary-color 是一个局部变量，只能在 body 块内和其子块内使用。如果我们尝试在外部访问这个变量，就会发生错误。
h1 {
color: $primary-color; // 报错，这个变量未定义
}变量用法
在 SASS 中，变量的用法非常广泛，我们可以使用变量来代替颜色、字体、边距、圆角、阴影等任何属性。使用变量不仅可以简化代码，还可以方便管理。
颜色变量
在 SASS 中，使用变量来代替颜色是最常见的用法。例如：
-- -------------------- ---- -------
--------------- -----
----------------- -----
---- -
----------------- ---------------
-- -
------ -----------------
-
-在上面的示例中，我们定义了两个颜色变量：$primary-color 和 $secondary-color。我们可以使用这些变量来设置 body 元素的背景颜色和标题的颜色。
字体变量
在 SASS 中，还可以使用变量来代替字体。例如：
-- -------------------- ---- -------
------------- ------ -----------
----------- -----
---- -
------------ -------------
---------- -----------
-- -
---------- ---------- - ----
-
-在上面的示例中，我们定义了两个字体变量：$font-family 和 $font-size。我们可以使用这些变量来设置 body 元素的字体和字号，并在 h1 元素内增加字体大小。
其他变量用法
除了颜色和字体，SASS 中还可以使用变量来代替边距、圆角、阴影等任何属性。例如：
$spacing: 12px;
.btn {
padding: $spacing;
border-radius: $spacing / 2;
box-shadow: 0 0 $spacing rgba(0, 0, 0, 0.25);
}在上面的示例中，我们定义了一个 $spacing 变量，用来代替一个按钮的内边距、圆角、阴影等属性。
总结
SASS 的变量作用域和用法是前端开发中非常重要的一部分。通过了解变量的作用域和使用方法，我们可以更好地利用 SASS 的灵活性和可重用性，提高开发效率和代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c874648841e9894ae1a15