Sass 資料型別：數字、字串、色彩、list、map 與 null

Q: 字串一定要加引號嗎？

不一定。Sass 把不帶引號的識別字也視為字串，例如 bold、sans-serif 都是。差別在於輸出時會不會帶引號，content 屬性需要引號，font-family 的關鍵字則不要。

Q: list 用逗號還是空白分隔？

兩種都是合法的 list，分隔符會被記住並在輸出時沿用。像 font-family 那種需要逗號的就用逗號，像 margin 那種需要空白的就用空白，取值方式完全相同。

Q: null 有什麼用？

值為 null 的宣告整行都不會輸出，所以它常拿來做選擇性的樣式，讓混入的參數沒給值時就自動略過那一行，不必額外寫條件判斷。它在 !default 判斷中也被視為沒有值。

Q: 怎麼知道一個值是什麼型別？

用內建模組的 meta.type-of() 取得型別名稱，搭配 @debug 印出來看。撰寫會被別人使用的混入或函式時，用它做參數檢查再用 @error 回報，可以省下對方很多除錯時間。

CSS 的值只有「文字」一種概念，Sass 則把值分成 七種型別。型別決定了一個值能參與哪些運算、能傳給哪些函式，型別搞錯是編譯錯誤最常見的來源。

型別	範例
數字 number	`16px`、`1.5`、`50%`
字串 string	`"Noto Sans TC"`、`bold`
色彩 color	`#2965f1`、`rgb(41 101 241)`
布林 boolean	`true`、`false`
null	`null`
清單 list	`1px solid red`、`(a, b, c)`
對照表 map	`(primary: #2965f1)`

數字

帶不帶單位都算數字：

scss

$base: 16px;
$ratio: 1.5;
$half: 50%;

單位會參與運算，16px * 2px 得到的平方像素不是有效的 CSS，細節見運算子。數字的處理函式在 sass:math。

字串

分成帶引號與不帶引號兩種，兩者都是字串：

scss

$title: "文章標題";      // 帶引號
$weight: bold;          // 不帶引號的識別字，也是字串
$family: sans-serif;    // 同上

差別只在輸出：

scss

.a { content: $title; }   // content: "文章標題"; ✅
.b { content: $weight; }  // content: bold; ❌ 無效的 CSS

判斷準則

最終輸出需要引號的（content、url 內的路徑）用帶引號字串，CSS 關鍵字（bold、none、sans-serif）用不帶引號的。轉換用 string.quote() 與 string.unquote()。

色彩

所有 CSS 色彩表示法都是色彩型別：

scss

$a: #2965f1;
$b: rgb(41 101 241);
$c: hsl(222 87% 55%);
$d: rebeccapurple;   // 具名色彩也是

色彩型別可以做調亮、調暗、混色等運算，見 sass:color。

帶引號的色碼不是色彩

"#2965f1" 是字串，傳給色彩函式會報錯。從 map 取值時特別容易踩到。

布林與 null

scss

$is-dark: true;
$shadow: null;

Sass 的真假判斷很單純：只有 false 與 null 是假，0、空字串 ""、空 list 全都是真。這與 JavaScript 差很多。

null 最實用的特性是 值為 null 的宣告整行都不輸出：

scss

@mixin box($shadow: null) {
  padding: 16px;
  box-shadow: $shadow; // 沒給就整行消失
}

.a { @include box; }                        // 只有 padding
.b { @include box(0 2px 8px #0002); }       // padding + box-shadow

不用寫 @if 就達成選擇性輸出，這是混入參數的常用技巧。

清單 list

一串值，用逗號或空白分隔：

scss

$font: "Noto Sans TC", sans-serif;   // 逗號分隔
$border: 1px solid #ddd;             // 空白分隔
$sizes: (8px, 16px, 24px);           // 括號可省略

分隔符會被記住，輸出時原樣沿用。所以 font-family 用逗號、margin 用空白，各自寫成對應的 list 即可。

scss

@use "sass:list";

$sizes: (8px, 16px, 24px);

.a { padding: list.nth($sizes, 2); } // 16px

list 的索引從 1 開始

不是 0。list.nth($sizes, 1) 拿到的是第一個。函式一覽見 sass:list。

對照表 map

鍵值對，Sass 裡最重要的資料結構：

scss

$theme: (
  primary: #2965f1,
  danger: #e03131,
  success: #2f9e44,
);

scss

@use "sass:map";

.btn-primary {
  background: map.get($theme, primary);
}

搭配 @each 就能批次產生樣式，是主題、斷點、間距刻度的標準做法，見對照表 map。

檢查型別

scss

@use "sass:meta";

@debug meta.type-of(16px);      // number
@debug meta.type-of("bold");    // string
@debug meta.type-of(#2965f1);   // color
@debug meta.type-of((a: 1));    // map

寫給別人用的混入或函式應該檢查參數型別，錯了就用 @error 明確報錯：

scss

@use "sass:meta";

@mixin theme($color) {
  @if meta.type-of($color) != color {
    @error "theme() 需要色彩，收到的是 #{meta.type-of($color)}。";
  }
  color: $color;
}