Values

有寫過任何一門程式語言的應該都知道，對於每個變數的值來說都會有其對應的資料型態，而在Sass內也存在這種機制，今天就來介紹一下Sass中的資料型態!

Numbers

在Sass中，整數、小數、單位的型態都是Numbers，Numbers型態值也可以直接做四則運算~
舉常見的例子來說:

@debug 100; // 100
@debug 0.8; // 0.8
@debug 16px; // 16px
@debug 5px * 2px; // 10px*px (square pixels)
@debug 4.5em;

Strings

在Sass中，型態是String的值會被引號包裹起來，中文稱之為字串，可能是一個字或是一個句子
舉例來說:

@debug "IT鐵人賽"; // "IT鐵人賽"
@debug "Hello World"; // "Hello World"
@debug "C:\\Program Files"; // "C:\\Program Files"

這邊也附帶講解一下字串拼接的方式:

// 範例1:
// 宣告一個型態為字串的變數
$anyword: "World";
// 拼接時用#{}就可以將字串替換進去
@debug "Hello #{$anyword}"; // "Hello World"

// 範例2:
// 宣告一個class name
$class-name: "foo";
// 替換字串
a.#{$class-name} { // a.foo
   color: blue;
}

Colors

常見的顏色表示方式都算Colors型態，舉例來說:

@debug #f2ece4; // #f2ece4
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // #191970
@debug rgb(204, 102, 153); // #c69
@debug rgba(107, 113, 127, 0.8); // rgba(107, 113, 127, 0.8)
@debug hsl(228, 7%, 86%); // #dadbdf
@debug hsla(20, 20%, 85%, 0.7); // rgb(225, 215, 210, 0.7)

Lists

一個變數的值是由多個值組成的，且每個值會用空格或是逗號隔開，詳細的用法會在之後的文章中說明
這邊簡單舉幾個常見例子:

$body-margin: 0 0 10px 15px;
$body-font: Helvetica, Arial, sans-serif;
$random-list: 10, 10 0, 3;

Maps

Maps在開發Sass時是非常常用到的一種型態，詳細的用法也會在之後的文章中說明，可以將它理解成類似Javascript Object的概念，是一種key-value pairs的表示方式，這邊先簡單舉個例子就好:

$font-weights: ("regular": 400, "medium": 500, "bold": 700);
// 也可以縮排程式比較好讀
$colors: (
  light: #ccc,
  dark: #000
);

Booleans

Booleans型態的值表示為true和false，常用來判斷一段邏輯最後的結果，進階的用法也會在之後的文章說明
這邊簡單舉幾個例子:

@debug 1px == 2px; // false
@debug 1px == 1px; // true
@debug 10px < 3px; // false

null

null型態的值表示式就只有null一種，代表不存在的值、沒有這個值
一般會用到的觀念為: 如果一個值是null，編譯出來並不會編譯成css，舉例來說:

$color: null;
div {
  width: 23px;
  color: $color;
  border: 2px solid $color;
}

編譯出來的CSS會是:

div {
  width: 23px;
  border: 2px solid;
} 

這在之後搭配Function或是Mixin的時候會是很常使用的一種用法~

今天將所有資料型態都介紹完了，上方的範例都可以開啟任一.SCSS檔案做練習

參考資料

https://sass-lang.com/documentation/values