Sass 数据类型

1. 前言

本节我们来学习 Sass 数据类型，几乎所有的开发语言都有数据类型这个概念，相信你一定不会陌生。Sass 也一样，它共有 7 种数据类型，分别是 Number 类型、Boolean 类型、String 类型、Colors 类型、Lists 类型、 Maps 类型和 Null 类型，本节内容我们主要来了解这 7 种数据类型，这也属于 Sass 基础知识的一部分，为后面的知识打好基础。

2. Sass 数据类型介绍

下面我们来分别介绍 Sass 的 7 种数据类型，这其中大多数都直接来自 CSS ，这里我们主要是了解和知道这几种数据类型，数据类型并不是单独的一个语法，它会应用于 Sass 的其他语法中，如 SassScript 中等等。

2.1 Number 类型（数字类型）

Number 类型，顾名思义例如 2 、3 、88 这些都属于 Number 类型，不过在 Sass 中 8px 这种定义像素的也叫做 Number 类型，所以说 Number 类型可能有单位也可能没有单位，而且这是非常常用的。 Number 类型的数字格式同 CSS 一样，支持科学计数法（在数字和10的幂之间用e表示），在浏览器中对科学计数符号的支持是不稳定的，所以 Sass 会将其编译成数字。一般我们在声明变量的时候，有的变量值会是 Number 类型。除此之外你还可以对数字进行运算，下面我们举几个例子看一下：

$main-height: 80px; // 带有单位的 Number 类型
$main-flex-grow: 1; // 不带单位的 Number 类型
$main-num: 5e3; // 使用科学计数法的数字
$main-max-height: 2 * 80px; // 运算
.box {
  height: $main-height;
  flex-grow: $main-flex-grow;
  width: $main-num;
  max-height: $main-max-height;
}

上面在 .box 的样式中，引用这些变量是为了更加直观的看见编译后的代码，在实际的开发中可能并不会这么使用，上面这段 Sass 代码编译为 CSS 为：

.box {
  height: 80px;
  flex-grow: 1;
  width: 5000;
  max-height: 160px;
}

上面我们举例演示了 Sass 的 Number 类型，除了这些还有一个需要知道的， Sass 的 Number 类型支持小数点后10位的精度。

2.2 Boolean 类型（布尔类型）

Boolean 类型无非就两个值，true 和 false ，当然除了直接写的 true 和 false 外，也可以是一些等式、关系运算、或内置函数的结果，不过这些结果最终还是 true 或 false 。一般来说 Boolean 类型都会结合 Sass 判断或者函数来使用，真正直接写在样式中基本是没有的，所以这里你只要知道这个类型就可以，在后面的章节中我们会用到 Boolean 类型，下面就举例感受一下：

@use "sass:math";

@debug 1px == 2px; // false 
@debug 1px == 1px; // true
@debug 10px < 3px; // false
@debug math.comparable(100px, 3in); // true

2.3 String 类型（字符串类型）

在 Sass 中支持两种展现方式不同的 String 类型，带引号的字符串和不带引号的字符串，比如 “a” 或者 a ，为什么是两种呢？因为它们共同覆盖了 CSS 中的属性值。同时任何的字符都可以作为字符串的一部分来书写，带需要为字符写上转义符 \ 。我们还是用声明变量的方式来演示，这样可以让你更直观的感受，在实际中这么用的并不多，一般也是会配合 Sass 函数来使用，在后面的章节会讲解，这里我们先用声明变量的方式来看下：

$string-one: 'Yahei'; // 带引号的字符串
$string-two: Yahei; // 不带引号的字符串
$string-three: '\"yahei'; // 使用转义符的字符串
.box {
 font:$string-one; 
 font-family: $string-two;
 font: $string-three;
}

上面这段代码编译 CSS 后是如下的样子：

.box {
  font: "Yahei";
  font-family: Yahei;
  font: '"yahei';
}

2.4 Colors类型（颜色类型）

Sass 对颜色的支持很丰富，包括 16 进制的颜色值（如 #ffffff 或 #000000等等）、CSS 颜色名（如 red 、blue 这种）或者是函数（如 rgb（）、rgba（）、hsl（）和hsla（）），这些都属于 Colors 类型，同时 Sass 也提供了很多颜色相关的函数，后面在函数的章节会详细说明。这里我们还是通过声明变量的方式来直观的感受一下 Colors 类型：

$color-one: #ffffff;
$color-two: red;
$color-three: rgb(204, 102, 153);
$color-four: rgba(107, 113, 127, 0.8);
.box {
  color: $color-one;
  background-color: $color-two;
  border-color: $color-three;
  color: $color-four;
}

上面这段代码转换成 CSS 为：

.box {
  color: #ffffff;
  background-color: red;
  border-color: #cc6699;
  color: rgba(107, 113, 127, 0.8);
}

2.5 Lists 类型（列表类型）

什么是 Lists 类型呢？如果你了解其他的一些编程语言或者你对 javascript 比较了解，你可以理解为其实 Lists 类型就是数组，在 Sass 中我们称之为列表，列表中包含一系列的值，在 Sass 中列表的元素可以使用逗号或者空格来分隔，列表配置 Sass 函数可以发挥出非常大的作用，直接写在样式中的并不多，在这里我们只是先认识一下这个数据类型，所以我还是通过变量声明的方式来举例演示一下：

$font-list: 'Georgia','Serif'; // 通过逗号分隔元素
$border-list: 1px 2px 3px 4px; // 通过空格分隔元素
$padding-list: 3px,3px 4px 4px; // 混用(不建议)

既然说列表可以理解为数组，当然也可以用过函数来遍历、获取元素的索引、等等，在函数的章节我们会讲解，这里你只要记住 Lists 类型就像是数组就可以了！

2.6 Maps 类型

Maps 类型是 key / value 的键值对的形式，可以通过键来查找对应的值，就像字典一样，如果你更熟悉 javascript ，它就像 js 中的 Object，在 Sass 中 Maps 类型必须使用括号括起来，同时每个键值对之间通过逗号分隔，键必须是唯一的，值可以重复。同时一些函数用于获取 Maps 中的键值、合并等等，但这并不是本节的重点！在这里我们举一个直观的例子来感受下 Maps 类型：

$textStyleMap: (
  'font-family': 'Georgia',
  'font-weight': 600,
  'font-size': 18px,
  'text-align': center
);
p {
  font-family: map-get($textStyleMap, 'font-family');
  font-weight: map-get($textStyleMap, 'font-weight');
  font-size: map-get($textStyleMap, 'font-size');
  text-align: map-get($textStyleMap, 'text-align');
}

上面的代码中定义了一个 Maps 类型 $textStyleMap，在为 p 标签编写样式的时候我们通过 map-get 函数去取值，这就是 Maps 类型，这段代码转换成 CSS 为：

p {
  font-family: "Georgia";
  font-weight: 600;
  font-size: 18px;
  text-align: center;
}

2.7 Null 类型

在 Sass 中 Null 类型只有一个值 null ，这也和 javascript 中的 null 类似，在 Sass 中它表示缺少值，通常由函数返回。如果说在列表中有 null ，那么在生成 CSS 的时候会忽略该空值，你需要知道在 Sass 的数据类型中有这个。

3. 小结

本节教程我们介绍和讲解了 Sass 的 7 种数据类型，它们如下图所示：

图片描述

在Sass 中数据类型并不是一种语法，而是一个概念和基础，你一定要了解，在学习函数知识前，你一定要对数据类型有概念，可以多看几遍把这几种数据类型记下来，在任何编程语言中，数据类型都是必要的基础知识！