Sass 數(shù)據(jù)類型

1. 前言

本節(jié)我們來(lái)學(xué)習(xí) Sass 數(shù)據(jù)類型，幾乎所有的開發(fā)語(yǔ)言都有數(shù)據(jù)類型這個(gè)概念，相信你一定不會(huì)陌生。Sass 也一樣，它共有 7 種數(shù)據(jù)類型，分別是 Number 類型、Boolean 類型、String 類型、Colors 類型、Lists 類型、 Maps 類型和 Null 類型，本節(jié)內(nèi)容我們主要來(lái)了解這 7 種數(shù)據(jù)類型，這也屬于 Sass 基礎(chǔ)知識(shí)的一部分，為后面的知識(shí)打好基礎(chǔ)。

2. Sass 數(shù)據(jù)類型介紹

下面我們來(lái)分別介紹 Sass 的 7 種數(shù)據(jù)類型，這其中大多數(shù)都直接來(lái)自 CSS ，這里我們主要是了解和知道這幾種數(shù)據(jù)類型，數(shù)據(jù)類型并不是單獨(dú)的一個(gè)語(yǔ)法，它會(huì)應(yīng)用于 Sass 的其他語(yǔ)法中，如 SassScript 中等等。

2.1 Number 類型（數(shù)字類型）

Number 類型，顧名思義例如 2 、3 、88 這些都屬于 Number 類型，不過在 Sass 中 8px 這種定義像素的也叫做 Number 類型，所以說 Number 類型可能有單位也可能沒有單位，而且這是非常常用的。 Number 類型的數(shù)字格式同 CSS 一樣，支持科學(xué)計(jì)數(shù)法（在數(shù)字和10的冪之間用e表示），在瀏覽器中對(duì)科學(xué)計(jì)數(shù)符號(hào)的支持是不穩(wěn)定的，所以 Sass 會(huì)將其編譯成數(shù)字。一般我們?cè)诼暶髯兞康臅r(shí)候，有的變量值會(huì)是 Number 類型。除此之外你還可以對(duì)數(shù)字進(jìn)行運(yùn)算，下面我們舉幾個(gè)例子看一下：

$main-height: 80px; // 帶有單位的 Number 類型
$main-flex-grow: 1; // 不帶單位的 Number 類型
$main-num: 5e3; // 使用科學(xué)計(jì)數(shù)法的數(shù)字
$main-max-height: 2 * 80px; // 運(yùn)算
.box {
  height: $main-height;
  flex-grow: $main-flex-grow;
  width: $main-num;
  max-height: $main-max-height;
}

上面在 .box 的樣式中，引用這些變量是為了更加直觀的看見編譯后的代碼，在實(shí)際的開發(fā)中可能并不會(huì)這么使用，上面這段 Sass 代碼編譯為 CSS 為：

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

上面我們舉例演示了 Sass 的 Number 類型，除了這些還有一個(gè)需要知道的， Sass 的 Number 類型支持小數(shù)點(diǎn)后10位的精度。

2.2 Boolean 類型（布爾類型）

Boolean 類型無(wú)非就兩個(gè)值，true 和 false ，當(dāng)然除了直接寫的 true 和 false 外，也可以是一些等式、關(guān)系運(yùn)算、或內(nèi)置函數(shù)的結(jié)果，不過這些結(jié)果最終還是 true 或 false 。一般來(lái)說 Boolean 類型都會(huì)結(jié)合 Sass 判斷或者函數(shù)來(lái)使用，真正直接寫在樣式中基本是沒有的，所以這里你只要知道這個(gè)類型就可以，在后面的章節(jié)中我們會(huì)用到 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 中支持兩種展現(xiàn)方式不同的 String 類型，帶引號(hào)的字符串和不帶引號(hào)的字符串，比如 “a” 或者 a ，為什么是兩種呢？因?yàn)樗鼈児餐采w了 CSS 中的屬性值。同時(shí)任何的字符都可以作為字符串的一部分來(lái)書寫，帶需要為字符寫上轉(zhuǎn)義符 \ 。我們還是用聲明變量的方式來(lái)演示，這樣可以讓你更直觀的感受，在實(shí)際中這么用的并不多，一般也是會(huì)配合 Sass 函數(shù)來(lái)使用，在后面的章節(jié)會(huì)講解，這里我們先用聲明變量的方式來(lái)看下：

$string-one: 'Yahei'; // 帶引號(hào)的字符串
$string-two: Yahei; // 不帶引號(hào)的字符串
$string-three: '\"yahei'; // 使用轉(zhuǎn)義符的字符串
.box {
 font:$string-one; 
 font-family: $string-two;
 font: $string-three;
}

上面這段代碼編譯 CSS 后是如下的樣子：

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

2.4 Colors類型（顏色類型）

Sass 對(duì)顏色的支持很豐富，包括 16 進(jìn)制的顏色值（如 #ffffff 或 #000000等等）、CSS 顏色名（如 red 、blue 這種）或者是函數(shù)（如 rgb（）、rgba（）、hsl（）和hsla（）），這些都屬于 Colors 類型，同時(shí) Sass 也提供了很多顏色相關(guān)的函數(shù)，后面在函數(shù)的章節(jié)會(huì)詳細(xì)說明。這里我們還是通過聲明變量的方式來(lái)直觀的感受一下 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;
}

上面這段代碼轉(zhuǎn)換成 CSS 為：

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

2.5 Lists 類型（列表類型）

什么是 Lists 類型呢？如果你了解其他的一些編程語(yǔ)言或者你對(duì) javascript 比較了解，你可以理解為其實(shí) Lists 類型就是數(shù)組，在 Sass 中我們稱之為列表，列表中包含一系列的值，在 Sass 中列表的元素可以使用逗號(hào)或者空格來(lái)分隔，列表配置 Sass 函數(shù)可以發(fā)揮出非常大的作用，直接寫在樣式中的并不多，在這里我們只是先認(rèn)識(shí)一下這個(gè)數(shù)據(jù)類型，所以我還是通過變量聲明的方式來(lái)舉例演示一下：

$font-list: 'Georgia','Serif'; // 通過逗號(hào)分隔元素
$border-list: 1px 2px 3px 4px; // 通過空格分隔元素
$padding-list: 3px,3px 4px 4px; // 混用(不建議)

既然說列表可以理解為數(shù)組，當(dāng)然也可以用過函數(shù)來(lái)遍歷、獲取元素的索引、等等，在函數(shù)的章節(jié)我們會(huì)講解，這里你只要記住 Lists 類型就像是數(shù)組就可以了！

2.6 Maps 類型

Maps 類型是 key / value 的鍵值對(duì)的形式，可以通過鍵 來(lái)查找對(duì)應(yīng)的值，就像字典一樣，如果你更熟悉 javascript ，它就像 js 中的 Object，在 Sass 中 Maps 類型必須使用括號(hào)括起來(lái)，同時(shí)每個(gè)鍵值對(duì)之間通過逗號(hào)分隔，鍵必須是唯一的，值可以重復(fù)。同時(shí)一些函數(shù)用于獲取 Maps 中的鍵值、合并等等，但這并不是本節(jié)的重點(diǎn)！在這里我們舉一個(gè)直觀的例子來(lái)感受下 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');
}

上面的代碼中定義了一個(gè) Maps 類型 $textStyleMap，在為 p 標(biāo)簽編寫樣式的時(shí)候我們通過 map-get 函數(shù)去取值，這就是 Maps 類型，這段代碼轉(zhuǎn)換成 CSS 為：

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

2.7 Null 類型

在 Sass 中 Null 類型只有一個(gè)值 null ，這也和 javascript 中的 null 類似，在 Sass 中它表示缺少值，通常由函數(shù)返回。如果說在列表中有 null ，那么在生成 CSS 的時(shí)候會(huì)忽略該空值，你需要知道在 Sass 的數(shù)據(jù)類型中有這個(gè)。

3. 小結(jié)

本節(jié)教程我們介紹和講解了 Sass 的 7 種數(shù)據(jù)類型，它們?nèi)缦聢D所示：

在Sass 中數(shù)據(jù)類型并不是一種語(yǔ)法，而是一個(gè)概念和基礎(chǔ)，你一定要了解，在學(xué)習(xí)函數(shù)知識(shí)前，你一定要對(duì)數(shù)據(jù)類型有概念，可以多看幾遍把這幾種數(shù)據(jù)類型記下來(lái)，在任何編程語(yǔ)言中，數(shù)據(jù)類型都是必要的基礎(chǔ)知識(shí)！