Sass - 函式
函式
@function 與 @mixin 相似，兩者的差異在於 @function 必須使用 @return 來返回結果，它運算後輸出是一個值，並非一段 CSS 樣式，@mixin 則可以使用 @include 產生一段 CSS 樣式。
$grid-width: 40px; |
@function 結合 @mixin
@function 有時也會拿來與 @mixin 做結合，並應用在一些字級或是單位的換算，以下做了一個產生對應字級，並且換算 rem 的範例
$base-font-size: 16px; |
內建函數
Sass 提供許多內建函式，在此作為一個記錄，提供未來查找、修改，這些函數大致可以分為以下幾類：
- 數值運算類
- 字串操作類
- 顏色操作類
- 列表操作類
- Map 物件操作類
- 選擇器操作類
- 一般工具類
（一）數字
在 Sass 中，數字包括了長度、持續時間、頻率、角度以及無單位數值等。
abs($number)
返回一個絕對值，類似 Math.abs()。
// scss |
ceil($number)
無條件進位，類似 Math.ceil()。
// scss |
floor($number)
無條件捨去，類似 Math.floor()。
// scss |
round($number)
四捨五入，類似 Math.round()。
// scss |
comparable($number1, $number2)
返回一個布林值，判斷傳入的兩個數值是否是可以進行比較或計算，true 或 false。
// scss |
max($number1)
比較相同的類型值，取最大值，類似 Math.max()。
// scss |
min($number1)
比較相同的類型值，取最小值，類似 Math.min()。
// scss |
percentage($number1)
將數字乘以 100% 以百分比（%）表示。
// scss |
random($limit)
沒有參數則隨機返回 0-1 區間內的小數（不包括 1），傳入一個整數變數，則隨機返回 1 至 $limit 之間的整數，包括 1 和 $limit。
// scss |
（二）字串
Sass 不要求字串必須用引號包裹，甚至是字串中包含空格。
quote($string)
為傳入的字串添加雙引號，如已有雙引號，則不做操作，直接返回該字符串。
quote("foo") => "foo" |
unquote($string)
剝離字串的引號，如該字符串本身就不帶引號，則原樣返回。
unquote("foo") => foo |
str-index($string, $substring)
返回 $substring 在 $string 中的索引位置。沒有找到的話，則返回 null 值。index 都是從 1 開始。
str-index(abcd, a) => 1 |
str-insert($string, $insert, $index)
在字串的 $index 位置插入內容為 $insert 的子字串。
str-insert("abcd", "X", 1) => "Xabcd" |
str-length($string)
返回字串的長度。
str-length("foo") => 3 |
str-slice($string, $start-at, $end-at:-1)
從 $string 中截取子字串，通過 $start-at 和 $end-at 設置始末位置，沒指定結束索引值則截取到字串末尾。
str-slice("abcd", 2, 3) => "bc" |
to-lower-case($string)
將傳入字串轉成小寫。
to-lower-case(ABCD) => abcd |
to-upper-case($string)
將傳入字串轉成大寫。
to-upper-case(abcd) => ABCD |
unique-id()
返回一個無引號的隨機字串作為 id。不過也只能保證在單次的 Sass 編譯中確保這個 id 的唯一性。
unique-id() => uad053b1c |
（三）顏色
顏色在 CSS 中佔有重要地位，在 Sass 中接受 HSL、RGB、HEX 以及預命名色等不同的顏色表達方式。
adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
這個函數能夠調整給定色彩的一個或多個屬性值，包括 RGB 和 HSL 色彩的各項色值參數，另外還有 alpha 通道的取值。這些屬性值的調整依賴傳入的關鍵值參數，通過這些參數再與給定顏色相應的色彩值做加減運算。所有屬性調整參數都為可選值。但是不能同時調整 RGB（$red, $blue, $green）和 HSL（$hue, $saturation, $lightness）兩套不同顏色體系的參數。
// scss |
adjust-hue($color, $degrees)
對給定色彩的 hue 值做調整。給出一個角度值參數，與給定色彩的 hue 角度值相加，返回一個新的色值。可以看做是對 adjust-color($color, $hue)的二度封裝。
當然，在實際 Sass 編譯中，在不同的編譯引擎下，得到的色彩格式可能不一定跟原始格式相同，有可能經過了 convert，當然這並不影響新顏色的表達：
// scss |
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
跟上面 adjust-color 類似，只是在該函數中傳入的參數將直接替換原來的值，而不做任何的運算。
原則上，所有的參數都是選擇性，同樣，不允許同時傳遞 RGB 和 HSL 兩套顏色命令體系所屬的參數。
// scss |
scale-color ($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
另一種實用的顏色調節函數。adjust-color 通過傳入的參數簡單的與本身的色值參數做加減，有時候可能會導致累加值溢出，當然，函數會把結果控制在有效的閾值內。而 scale-color 函數則避免了這種情況，可以不必擔心溢出，讓參數在閾值範圍內進行有效的調節。
舉個例子，一個顏色的亮度 lightness 取值在 0% ~ 100%之間，假如執行 scale-color($color, $lightness: 40%)，表明該顏色的亮度將有(100 -原始值) × 40%的增幅。
另一個例子，執行 scale-color($color, $lightness: -40%)，表明這個顏色的亮度將減少(原始值- 0) × 40%這麼多的值。
所有傳參的取值範圍都在 0% ~ 100% 之間，並且 RGB 同 HSL 的傳參不能衝突。
// scss |
alpha($color), aka: opacity ($color)
返回給定顏色的 alpha 值。返回值必定在 0-1 之間。
// scss |
red($color)
給定一個顏色，取紅色部分的 10 進制色值（0-255）。HSL 顏色會根據相應算法 convert 成 RGB 表達式後進行取值。
// scss |
green($color)
給定一個顏色，取綠色部分的 10 進制色值（0-255）。HSL 顏色會根據相應算法 convert 成 RGB 表達式後進行取值。
// scss |
blue($color)
給定一個顏色，取藍色部分的 10 進制色值（0-255）。HSL 顏色會根據相應算法 convert 成 RGB 表達式後進行取值。
// scss |
invert($color)
去一個顏色的反色。具體來講，就是取 RGB 色的紅、綠、藍色值與 255 的差值，重新合成一個新的顏色。當然，如果是 HEX 色值，那就是與 FF 的差值，一樣。
// scss |
complement($color)
返回一個顏色的補色，其實就是對 adjust-color($color, $hue: 180deg) 的再次封裝。
darken($color, $amount)
加深一個給定的顏色，將給定色的亮度值減去傳入的 $amount 值，得到一個新的色值。亮度值的取值區間在 0% ~ 100%。等價於 adjust-color($color, $lightness: -$amount)
// scss |
lighten($color, $amount)
提升一個色值的亮度。當然，其取值範圍必定在 0% ~ 100% 內。等同於 adjust-color($color, $lightness: $amount)
// scss |
lightness($color)
獲取顏色的亮度值。
// scss |
desaturate($color, $amount)
調低一個顏色的飽和度後產生一個新的色值。同樣，飽和度的取值區間在 0% ~ 100%。等同於 adjust-color($color, $saturation: -$amount)
// scss |
fade-in($color, $amount) 或 opacify($color, $amount)
藉由數值 0 至 1 作爲 增加透明度 的表示方式。降低顏色的透明度，取值在 0-1 之。等價於 adjust-color($color, $alpha: $amount)
// scss |
fade-out($color, $amount) 或 transparentize($color, $amount)：
藉由數值 0 至 1 作爲 減少透明度 的表示方式。提升顏色的透明度，取值在 0-1 之間。等價於 adjust-color($color, $alpha: -$amount)
// scss |
grayscale($color)
將給定顏色的飽和度降到 0，可以看做是對 desaturate($color, 100%) 的再次封裝，也可以這麼理解：change-color($color, $saturation: 0%)。
// scss |
hue($color)
返回顏色在 HSL 色值中的角度值。
.a { |
mix($color1, $color2, $weight:50%)
混色操作。將兩個顏色的紅、綠、藍色值按比例重新計算後，返回一個新的顏色。默認$weight為50%，表明新顏色各取50% $color1 和$color2 的色值相加。如果$weight 為 25%，那表明新顏色為 25% $color1 和 75% $color2 的色值相加。
mix(#f00, #00f) => #7f007f |
saturate($color, $amount)
提高傳入顏色的色彩飽和度。等同於 adjust-color($color, $saturation: $amount)
.a { |
saturation($color)
獲取一個顏色的飽和度值。
.a { |
（四）列表
列表是 Sass 的陣列，它是一個一維的資料結構，用於保存任意類型的數值（包括列表，從而產生嵌套列表），所有對列表對像做的增刪改操作，都不會影響原隊列，只會返回一個新的列表物件作為結果。
append($list, $val, $separator:auto)
將值加入到一個列表的尾部，類似 JS 的 Array.prototype.push。$separator 分隔符參數默認會自動偵測隊列中的分隔符，除非你強行指定一個（取值：comma 或 space）。另外，列表中的只有一個元素時，如果沒有傳入$separator 參數，此時分隔符的取值在內部會指定為 space。
// scss |
index($list, $value)
返回給定值在 list 或 map 中的位置，如果值未找到，則返回 null。index 都是從 1 開始，而不是 0。這個函式也能作用於 Map 物件的變數。
// scss |
join($list1, $list2, $separator:auto)
合併兩個列表，類似 JS 的 Array.prototype.concat 操作。如不指定$separator，則以第一列表的分隔符為準。如果兩列表中的 item 數都小於 2 個，則用空格作為分隔符。
// join(10px 20px, 30px 40px) => 10px 20px 30px 40px |
length($list)
返回一 list 的 length。這個函式同樣適合於 Map 物件。
// scss |
list-separator($list)
返回一列表的分隔符類型（comma 或 space）。如隊列內少於 2 個成員而無法呈現分隔符時，則總是返回 space。
// scss |
nth($list, $n)
獲取 list 中第 $n 項的值。這個函數同樣也可以用在 Map 物件中。如傳入負數索引值，則從列表的尾部開始計數獲取相應的元素。
// scss |
zip($lists…)
將多個列表按照以相同索引值為一組，重新組成一個新的多維度列表。生成的列表長度以最短的那個傳入列表為準。
zip(1px 1px 3px, solid dashed solid, red green blue) => 1px solid red, 1px dashed green, 3px solid blue |
（五）Map 物件
Sass 可以使用 Map 資料結構映射關聯陣列。所有對 Map 物件做的增刪改操作，都不會影響原來的資料，只會返回一個新的 Map 物件作為結果。
map-get($map, $key)
取得 Map 物件中 key 所對應的 value。如沒有對應的 key，則返回 null 值。
map-get(("foo": 1, "bar": 2), "foo") => 1 |
map-keys($map)
取得 Map 中的 key，並返回由這些 key 組成的隊列。
map-keys(("foo": 1, "bar": 2)) => "foo", "bar" |
map-values($map)
取得 Map 中所有的 value 值，形成一個 list。
map-values(("foo": 1, "bar": 2)) => 1, 2 |
map-has-key($map, $key)
檢測 Map 中是否含有所需查詢的 key。
map-has-key(("foo": 1, "bar": 2), "foo") => true |
map-merge($map1, $map2)
合併兩個 Map 形成一個新的 Map 物件，如果兩個 Map 中出現相同 key 值，$map2 將會覆蓋 $map1 中的鍵值。這個一個給現有 Map 添加鍵值對的最合理方法。新 Map 中鍵值對的排列順序遵循$map1 的排列順序，新的鍵值對添加在原有鍵值對後。
map-merge(("foo": 1), ("bar": 2)) => ("foo": 1, "bar": 2) |
（六）選擇器
CSS 中的選擇器具有一定的特殊性，與一般的字串有一些區別，針對選擇器的一些必要操作，Sass 提供瞭如下一些函數工具：
selector-append($selectors…)
連接多個傳入的 CSS 選擇器，達到類似 $selector1 { &$selector2 { … } } 的效果。
selector-append(".foo", ".bar", ".baz") => .foo.bar.baz |
selector-extend($selector, $extendee, $extender)
???
selector-extend(".a .b", ".b", ".foo .bar") => .a .b, .a .foo .bar, .foo .a .bar |
selector-nest($selectors…)
層疊傳入的 CSS 選擇器，形成類似 $selector1 { $selector2 { … } }的新選擇器。傳入的選擇器，還允許附帶 Sass 的父選擇器 &，當然，它肯定不能出現在第一個傳參內。
selector-nest(".foo", ".bar", ".baz") => .foo .bar .baz |
selector-parse($selector)
將字串的選擇器轉換成實際可用的一個選擇器陣列。
selector-parse(".foo .bar, .baz .bang") => ('.foo' '.bar', '.baz' '.bang') |
selector-replace($selector, $original, $replacement)
給定一個選擇器，用 $replacement 替換 $original 後返回一個新的選擇器。
selector-replace(".foo .bar", ".bar", ".baz") => ".foo .baz" |
selector-unify
將兩組選擇器合成一個複合選擇器。如兩個選擇器無法複合，則返回 null 值。
selector-unify(".a", ".b") => .a.b |
simple-selectors($selector)
將複合選擇器拆為單個選擇器。注意，這裡的傳參$selector 僅指複合選擇器(compound selector)，所以傳入的選擇器內不應包含逗號或者空格。
simple-selectors(".foo.bar") => ".foo", ".bar" |
（七）檢測工具
call($name, $args…)
函數的動態調用。支持 CSS 內建函數，Sass 內建函數和自定義函數。
call(rgb, 10, 100, 255) => #0a64ff |
function-exists($name)
檢測某個函數是否存在，內建、自建的都行。
function-exists(lighten) => true |
global-variable-exists($name)
檢測某個全局變量是否定義。
$a-false-value: false; |
if ($condition, $if-true, $if-false)
根據傳入的條件來返回對應的值，有點像 JS 裡的三元運算符。
if(true, 1px, 2px) => 1px |
inspect ($value)
$breakpoints: ( |
is-superselector($super, $sub)
比較兩組選擇器，看看傳入的選擇器哪組 match 的範圍大（可以通過選擇器優先級比較法比較，優先級底的選擇範圍大）。也可以從簡單選擇器通常比複雜選擇器 match 範圍大這一特性加以判斷。
is-superselector(".foo", ".foo.bar") => true |
keywords($args)
將傳入 @function 或 @mixin 的參數列表轉換成 map 格式的變量。轉換後的 key 變成一個字符串，並且沒有了$符號。
@mixin foo($args...) { |
mixin-exists($name)
檢測指定 mixin 是否存在。
mixin-exists(nonexistent) => false |
type-of($value)
返回值類型。
type-of(100px) => number |
unit($number)
返回傳入數字的單位（或複合單位）。
unit(100) => "" |
unitless($number)
返回一個布爾值，判斷傳入的數字是否帶有單位。
unitless(100) => true |
variable-exists ($name)
判斷一個變量是否在當前上下文或者全局中存在，變數帶入參數時沒有$。
$a-false-value: false; |