在本章中，我们将深入探讨 Sass 中的各种数据类型。了解这些数据类型对于有效地使用 Sass 进行样式编写至关重要。
变量
Sass 中的变量是存储值的一种方式，可以重复使用。变量以美元符号 $ 开头，后面跟着变量名。变量可以存储数字、字符串、颜色、布尔值等。
$main-color: #3498db; $font-stack: Helvetica, sans-serif; $base-size: 16px;
使用变量
变量可以在整个项目中被引用和修改，这使得维护和调整变得更加方便。
body {
font-family: $font-stack;
color: $main-color;
}数字
Sass 支持带有单位的数字。单位包括长度（如 px, em, %）、时间（如 s, ms）以及角度（如 deg）。Sass 还支持运算符（如 +, -, *, / 和 %），使您能够对数值进行计算。
$font-size: 16px;
$line-height: 1.5;
p {
font-size: $font-size;
line-height: $font-size * $line-height;
}数字单位转换
Sass 支持单位之间的转换。例如，将 em 转换为 px：
-- -------------------- ---- ------- ---------------- ----- ------ ---------- - ----------- - --------------- - --- - - - ---------- ------- -
字符串
Sass 支持两种类型的字符串：双引号字符串和单引号字符串。它们的主要区别在于插值表达式的处理方式。
双引号字符串
双引号字符串允许插值表达式，这意味着您可以将变量插入到字符串中。
$name: "John";
$greeting: "Hello, #{$name}!";
.greeting {
content: $greeting;
}单引号字符串
单引号字符串不支持插值表达式。如果需要插入变量，必须使用双引号。
$name: "John";
$greeting: 'Hello, #{$name}!'; // 这里会报错
.greeting {
content: "Hello, #{$name}!";
}颜色
Sass 提供了丰富的颜色函数来操作颜色值，包括混合颜色、调整色调、饱和度和亮度等。
$color: #3498db;
p {
background-color: lighten($color, 10%);
border-color: darken($color, 10%);
}颜色混合
使用 mix() 函数可以混合两种颜色。
$primary-color: #3498db;
$secondary-color: #e74c3c;
.button {
background-color: mix($primary-color, $secondary-color, 50%);
}布尔值
布尔值包括 true 和 false，用于逻辑运算。布尔值常用于条件判断。
$dark-theme: true;
body {
background-color: if($dark-theme, #333, #fff);
}条件判断
除了 if() 函数外，Sass 还支持更复杂的条件结构，如 @if、@else if 和 @else。
-- -------------------- ---- -------
------ -----
- -
---------- ------
--- ----- - ---- -
---------- -----
- ----- -- ----- - ---- -
---------- -----
- ----- -
---------- -----
-
-列表
列表是用空格或逗号分隔的一系列值。列表中的每个元素都可以是一个单独的数据类型。
$colors: red, blue, green;
$sizes: 10px 20px 30px;
.container {
width: nth($sizes, 2); // 选择列表中的第 2 个元素
}访问列表元素
nth() 函数可以用来访问列表中的特定元素。
$list: 10px 20px 30px;
p {
margin: nth($list, 2);
}映射
映射是键值对的集合，类似于 JavaScript 中的对象或 Python 中的字典。
-- -------------------- ---- ------- -------------- - -------- -------- ---------- -------- ------- ------- -- ---- - ----------------- ---------------------- --------- -
访问映射值
map-get() 函数可以从映射中获取指定键对应的值。
-- -------------------- ---- ------- -------------- - -------- -------- ---------- -------- ------- ------- -- ------- - ----------------- ---------------------- --------- -
通过本章的学习，你应该已经掌握了 Sass 中各种基础的数据类型及其用法。这些数据类型是构建复杂和可维护的 CSS 的重要工具。在实际项目中，灵活运用这些知识将帮助你更高效地编写代码。