什么是 SASS
SASS 是一种 CSS 预处理器，它可以让我们使用变量、嵌套规则、Mixin、函数和循环等高级功能，让我们更加方便地编写和维护 CSS。
SASS 有两种语法，分别是 .sass 和 .scss，其中 .sass 是使用缩进的语法，而 .scss 像是 CSS 的超集，更加适合前端开发人员使用。
如何正确使用变量
在 SASS 中，使用 $ 符号来定义变量，比如：
--------------- --------
上面的代码定义了一个名为 $primary-color 的变量，其值为 #008CBA。这样我们就可以在后面的代码中使用这个变量了：
---- - ----------------- --------------- - ---- - ------ --------------- -
这样一来，两个选择器都使用了 $primary-color 这个变量，我们只需要在变量处修改颜色值，所有使用了该变量的处都会自动更新。
命名规范
变量的命名应该有一定的规范，以便于代码的维护和可读性。
一般来说，我们可以使用小写字母和连字符 - 来表示一个变量名。如果变量名由多个单词组成，可以采用以下方式：
------------------ -----
上面的代码中，使用连字符连接两个单词，同时每个单词都使用小写字母。这样可以更加清晰地表达变量的含义，也更方便记忆。
变量默认值
在 SASS 中，我们也可以为变量指定默认值。比如：
---------- ---- ---------
上面的代码中，使用 !default 指定了变量 $bg-color 的默认值为 #fff。
如果后面的代码中没有为该变量赋值，那么它的值就是默认值。反之，如果为其赋值，则该值会覆盖默认值。
全局变量与局部变量
在 SASS 中，变量可以分为两种：全局变量和局部变量。
全局变量通常在文件的顶部定义，它可以在全局范围内使用：
---------- ----- ---- - ----------------- ---------- -
上面的代码中，变量 $bg-color 是一个全局变量，可以在 body 选择器内部使用。
局部变量则是在一定范围内有效，通常是定义在选择器内部或者函数内部。
---- - ----------- ----- ---------- ----------- -
上面的代码中，变量 $font-size 是一个局部变量，只在 .btn 选择器内部有效。
总结
SASS 可以更方便地编写和维护 CSS，其中变量是其中一个重要的功能。使用 $ 符号来定义变量，有一定的命名规范和默认值的设置，还有全局变量和局部变量的区分。
在实践中，应该尽量遵循命名规范，合理使用变量来提高代码的复用性和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65192f0f95b1f8cacd1648ed