SASS 是一种 CSS 预处理器，它提供了许多有用的功能，例如变量、嵌套、混合、继承等。在 SASS 中，我们可以使用 $ 符号来定义变量。但是，$ 符号在 SASS 中的使用有一些需要注意的地方。本文将详细介绍如何正确使用 $ 符号。
定义变量
在 SASS 中，我们可以使用 $ 符号来定义变量。变量可以用于存储颜色、字体、尺寸等值。下面是一个简单的例子：
$primary-color: #337ab7; body { color: $primary-color; }
在上面的例子中，我们定义了一个名为 $primary-color 的变量，并将它的值设置为 #337ab7。然后，我们在 body 元素中使用了这个变量。
变量作用域
在 SASS 中，变量有作用域的概念。变量的作用域可以是全局的，也可以是局部的。在定义变量时，我们可以使用 !global 关键字将变量定义为全局变量。下面是一个例子：
-- -------------------- ---- ------- --------------- ------- -------- ---- - ------ --------------- - ---------- - --------------- -------- ----------------- --------------- - ------ - ------ --------------- -展开代码
在上面的例子中，我们定义了一个全局变量 $primary-color，并将它的值设置为 #337ab7。然后，我们在 .container 元素中重新定义了 $primary-color 变量，并将它的值设置为 #ff0000。在 button 元素中，我们使用了 $primary-color 变量，这时它的值为 #ff0000。
变量插值
在 SASS 中，我们可以使用 #{} 语法来插入变量。这种语法可以用于拼接字符串和变量。下面是一个例子：
$prefix: fa; .icon-#{ $prefix }-home { font-family: #{$prefix}-home; }
在上面的例子中，我们定义了一个变量 $prefix，并将它的值设置为 fa。然后，我们使用 #{} 语法将 $prefix 变量插入到 .icon-#{ $prefix }-home 类名和 #{$prefix}-home 字体名称中。
变量默认值
在 SASS 中，我们可以为变量设置默认值。如果变量没有被定义，那么它的值就是默认值。下面是一个例子：
$primary-color: #337ab7 !default; body { color: $primary-color; }
在上面的例子中，我们定义了一个名为 $primary-color 的变量，并将它的默认值设置为 #337ab7。如果 $primary-color 变量没有被定义，那么它的值就是 #337ab7。
变量列表
在 SASS 中，我们可以使用 $ 符号来定义变量列表。变量列表可以用于存储多个值。下面是一个例子：
-- -------------------- ---- ------- ------------ ----- ----- ----- -- - ---------- ---------------- --- - -- - ---------- ---------------- --- - -- - ---------- ---------------- --- -展开代码
在上面的例子中，我们定义了一个名为 $font-sizes 的变量列表，并将它的值设置为 12px, 14px, 16px。然后，我们在 h1、h2 和 h3 元素中使用了 $font-sizes 变量列表中的值。
结语
$ 符号在 SASS 中是一个非常重要的符号，它可以用于定义变量、拼接字符串、设置默认值等。但是，在使用 $ 符号时，我们需要注意变量的作用域和插值的语法。希望本文能够对你学习和使用 SASS 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67863cec4083a4caeeed5776
