引言
SASS 是一种 CSS 预处理器，能够让开发者使用更人性化的方式来编写 CSS，提高开发效率和代码复用性。其中，变量是 SASS 中非常重要的一个概念，本文将详细介绍 SASS 中的变量声明和赋值技巧，帮助大家更加熟练地使用 SASS。
变量声明
SASS 中声明变量使用 $ 符号，类似于 JavaScript 中使用 var 定义变量。下面是一个简单的例子：
$primary-color: #0277BD;
上述代码定义了一个名为 $primary-color 的变量，并将其赋值为 #0277BD。在定义变量时，要注意一下几点：
- 变量名必须以
$符号开头。 - 变量名通常使用中划线或下划线命名，不建议使用驼峰命名。
- 变量名中可以包含数字、字母和特定字符（如
-或_），但不能以数字开头。
变量赋值
在 SASS 中赋值有两种方式：简单赋值和默认赋值。
简单赋值
我们已经在上面看到了一个简单的变量声明和赋值的例子。使用简单赋值的方式，可以将一个值直接赋给变量，如下所示：
$primary-color: #0277BD; // 简单赋值
默认赋值
默认赋值的方式使用 !default 关键字，可以使得变量在没有定义或者定义为空值的情况下，采用默认值，如下所示：
$primary-color: #0277BD !default; // 默认赋值
默认赋值方式对于当变量被多次定义时也非常实用，可以让变量始终保持一个默认值，而不是被不同的定义所覆盖。
变量计算
在 SASS 中还可以进行数学计算，包括加、减、乘和除四种基本计算方式。以下列举了一些常见的数学计算的写法：
-- -------------------- ---- ------- -- - -- ------- ----- - ----- -- -- ----- -- - -- -------- ----- - ----- -- -- ----- -- - -- ----------- ---- - -- -- -- ---- -- - -- ------------- ---- - -- -- -- ---- -- ---- -- ------------ ------ ------- ----------- - -- -- -- -----
需要注意的是，在 SASS 中数学计算使用的是 +、-、* 和 /，而不是 ＋、－、× 和 ÷。
变量作用域
在 SASS 中，每个变量都有自己的作用域。在 CSS 文件中，变量的作用域默认是全局的 —— 可以在任何位置使用。例如：
$primary-color: #0277BD;
body {
background-color: $primary-color;
}上面代码中，$primary-color 是在全局声明的，可以在任何位置使用。
但是，在 SASS 中，还有其他的作用域范围，例如局部作用域和父级作用域。
局部作用域
通过在选择器中声明变量，可以将变量的作用域限定在该选择器内。例如：
-- -------------------- ---- -------
---- -
--------------- --------
- -
------ ---------------
-
-
-- -
-- ------ -------------- -- --
-父级作用域
在 SASS 中，可以使用 & 关键字让一个子选择器直接链接在其父级选择器之后，形成更加精炼的 CSS 代码。在父子选择器嵌套的过程中，可以使用 $ 符号定义父选择器的变量，以及使用 #{} 语法将父选择器变量插入子选择器中。例如：
-- -------------------- ---- -------
------- -
---------- --------
-- -
-- -
------- -
----------------- ----------------- -----
-
-
-
-在上面的例子中，定义了一个 $bg-color 变量，然后在子选择器中使用 darken 函数将背景颜色进行了加深处理。
总结
在 SASS 中，变量的声明和赋值非常重要，有助于将 CSS 代码进行精简化和模块化处理。除了变量的基本使用技巧，本文还介绍了变量的赋值、计算和作用域等相关知识。在使用 SASS 进行开发时，要善用变量，并深入理解变量计算和作用域等概念，才能更加高效地编写 CSS 代码，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64de1a18f6b2d6eab3962860