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

1. 前言

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

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

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

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

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

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

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

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

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

2.2 Boolean 類型（布爾類型）

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

$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 這種）或者是函數(shù)（如 rgb（）、rgba（）、hsl（）和hsla（）），這些都屬于 Colors 類型，同時 Sass 也提供了很多顏色相關的函數(shù)，后面在函數(shù)的章節(jié)會詳細說明。這里我們還是通過聲明變量的方式來直觀的感受一下 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 類型就是數(shù)組，在 Sass 中我們稱之為列表，列表中包含一系列的值，在 Sass 中列表的元素可以使用逗號或者空格來分隔，列表配置 Sass 函數(shù)可以發(fā)揮出非常大的作用，直接寫在樣式中的并不多，在這里我們只是先認識一下這個數(shù)據(jù)類型，所以我還是通過變量聲明的方式來舉例演示一下：

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

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

2.6 Maps 類型

Maps 類型是 key / value 的鍵值對的形式，可以通過鍵 來查找對應的值，就像字典一樣，如果你更熟悉 javascript ，它就像 js 中的 Object，在 Sass 中 Maps 類型必須使用括號括起來，同時每個鍵值對之間通過逗號分隔，鍵必須是唯一的，值可以重復。同時一些函數(shù)用于獲取 Maps 中的鍵值、合并等等，但這并不是本節(jié)的重點！在這里我們舉一個直觀的例子來感受下 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 函數(shù)去取值，這就是 Maps 類型，這段代碼轉換成 CSS 為：

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

2.7 Null 類型

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

3. 小結

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

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