Sass 数据类型介绍

发布时间：2023-05-25 13:50:24 所属栏目：教程来源：

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

Numb

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

Number 类型（数字类型）

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

$main-height: px; // 带有单位的 Number 类型
$main-flex-grow: ; // 不带单位的 Number 类型
$main-num: e; // 使用科学计数法的数字
$main-max-height: * px; // 运算
.Box {
height: $main-height;
flex-grow: $main-flex-grow;
width: $main-num;
max-height: $main-max-height;
}
上面在 .Box 的样式中，引用这些变量是为了更加直观的看见编译后的代码，在实际的开发中可能并不会这么使用，上面这段 Sass 代码编译为 CSS 为：

.Box {
height: px;
flex-grow: ;
width: ;
max-height: px;
}
上面我们举例演示了 Sass 的 Number 类型，除了这些还有一个需要知道的， Sass 的 Number 类型支持小数点后10位的精度。

Boolean 类型（布尔类型）

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

@use "sass:math";
@debug px == px; // false
@debug px == px; // true
@debug px < px; // false
@debug mathcomparable(px, in); // true

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';
}

Colors类型（颜色类型）

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

$color-one: #ffffff;
$color-two: red;
$color-three: rgb(, , );
$color-four: rgba(, , , );
.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(, , , );
}

Lists 类型（列表类型）

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

$font-list: 'Georgia','Serif'; // 通过逗号分隔元素
$border-list: px px px px; // 通过空格分隔元素
$padding-list: px,px px px; // 混用(不建议)
既然说列表可以理解为数组，当然也可以用过函数来遍历、获取元素的索引、等等，在函数的章节我们会讲解，这里你只要记住 Lists 类型就像是数组就可以了！

Maps 类型

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

$textStyleMap: (
'font-family': 'Georgia',
'font-weight': ,
'font-size': px,
'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: ;
font-size: px;
text-align: center;
}

Null 类型

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!