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