SASS（Syntactically Awesome Style Sheets）是一种CSS预处理器，它扩展了CSS语言，使得开发者可以更加高效地编写CSS代码。在SASS中，变量和列表是开发中常见的重要概念，它们能够帮助我们更加方便地管理CSS样式，提高开发效率。
一、变量用法
1.1 定义变量
在SASS中，可以使用$符号定义变量。变量名可以是任意的，但是建议使用有意义的名称，以便于代码的维护。
示例代码：
$primary-color: #2f4f4f;
上面的代码定义了一个名为 $primary-color 的变量，它的值为 #2f4f4f。
1.2 使用变量
定义了变量之后，我们可以在样式中使用它。使用变量的好处在于，如果需要修改样式中的某个颜色或者字体大小等属性，只需要修改变量的值即可，而不需要在多个样式中进行修改，从而提高了代码的维护性。
示例代码：
body {
background-color: $primary-color;
}上面的代码中，我们使用了刚刚定义的 $primary-color 变量，将背景色设置为 #2f4f4f。
1.3 变量的作用域
在SASS中，变量的作用域分为全局和局部两种。全局变量可以在整个SASS文件中使用，而局部变量只能在定义它的作用域内使用。
示例代码：
-- -------------------- ---- ------- -------------- ----- ------ ------ - ------------- ----- ------ ------------- - ---- - ------ -------------- -------- ------- -
上面的代码中，我们定义了一个全局变量 $global-color 和一个局部变量 $local-color。在样式中，我们先使用了 $global-color，然后在 @mixin 中使用了 $local-color，最后在样式中调用 @mixin。
二、列表用法
2.1 定义列表
在SASS中，列表是一种有序的数据类型，可以包含多个值。列表可以使用括号或者逗号来定义。
示例代码：
$font-family: ("Microsoft YaHei", "Helvetica", sans-serif);
$padding: 10px 20px;上面的代码中，我们定义了一个包含三个值的列表 $font-family，和一个包含两个值的列表 $padding。
2.2 使用列表
在样式中，我们可以使用索引来获取列表中的某个值。SASS中的索引从1开始，而不是从0开始。
示例代码：
h1 {
font-family: nth($font-family, 1);
padding: nth($padding, 1) nth($padding, 2);
}上面的代码中，我们使用了 nth() 函数来获取列表中的值。在第一个 h1 标签中，我们获取了 $font-family 列表中的第一个值，即 "Microsoft YaHei"；在第二个 h1 标签中，我们获取了 $padding 列表中的第一个值和第二个值，即 10px 和 20px。
2.3 列表的操作
SASS中提供了一些列列表的操作函数，例如添加、删除、合并等。
示例代码：
-- -------------------- ---- ------- -------- ----- -------- ----- -------- ----- ------------- --------- --------- ------------- --------- --------- ------------- ------------------ -------------- -- ------ ------------- -------------------- --------- -- ---------- ------------- ----------------- --- -- ---------- ---- - ----------------- ------------- ------ ------------- ------------- ------------- -
上面的代码中，我们定义了三个颜色变量和两个列表。在样式中，我们使用了 join() 函数将两个列表合并成一个新的列表 $color-list3；使用 append() 函数将 $color3 添加到 $color-list1 列表的末尾，得到 $color-list4；使用 nth() 函数获取 $color-list2 列表中的第二个值，即 $color3。最后，我们将 $color-list3、$color-list4、$color-list5 分别用于背景色、字体颜色和边框颜色的设置。
综上所述，SASS中的变量和列表是非常重要的概念，它们能够帮助我们更加高效地编写CSS代码。在实际开发中，我们可以使用变量来方便地管理样式中的颜色、字体大小等属性；使用列表来处理多个值的情况，例如多个颜色值的合并、删除等操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67da5acfa941bf713424a605
