說明
Sass 定義了各種類型的函數，這些函數可以通過 css 語句直接調用。可以看到Sass的函數功能已經相當豐富了。整理了Sass的主要函數，重點在于後面的顔色函數，設計非常的銀杏！
String(字元串) 函數
1、quote(string)
給字元串添加引号
quote(hello) //"hello" 2、unquote(string)
移除字元串的引号
unquote("hello") //hello 3、str-index(string, substring)
傳回 substring 子字元串第一次在 string 中出現的位置。如果沒有比對到子字元串，則傳回 null。區分大小寫。
str-index(abcd, a) // 1
str-index(abcd, ab) // 1
str-index(abcd, X) // null 4、str-insert(string, insert, index)
在字元串 string 中 index 位置插入 insert。
str-insert("Hello world!", " xiaoming", 6) //"Hello xiaoming world!" 5、str-length(string)
傳回字元串的長度。
str-length("hello") //5 6、str-slice(string, start, end)
從 string 中截取子字元串，通過 start-at 和 end-at 設定始末位置，未指定結束索引值則預設截取到字元串末尾。
是不是感覺合js的操作有些類似。
str-slice("abcd", 2, 3) => "bc"
str-slice("abcd", 2) => "bcd"
str-slice("abcd", -3, -2) => "bc"
str-slice("abcd", 2, -2) => "bc" 7、to-lower-case(string)
将字元串轉成小寫
to-lower-case("HELLO") // "hello" 8、to-upper-case(string)
将字元串轉成大寫
to-upper-case("hello") // "HELLO" 9、unique-id()
傳回一個無引号的随機字元串作為 id。
不過也隻能保證在單次的 Sass 編譯中確定這個 id 的唯一性。
unique-id() // 3a153b3ds 數字函數
10、abs(number)
傳回一個數值的絕對值。
abs(13) // 13
abs(-13) // 13 11、comparable(num1, num2)
傳回一個布爾值，判斷 num1 與 num2 是否可以進行比較 ，注意是否可以比較，不是比較的結果。
comparable(15px, 10px) // true
comparable(20mm, 1cm) // true
comparable(35px, 2em) // false 12、ceil(number)
向上取整 。
ceil(13.24) //14 13、floor(number)
向下取整 。
floor(15.84) // 15 14、max(number...)
傳回最大值 。
max(5, 7, 9, 0, -3, -7) // 9 15、min(number...)
傳回最小值 。
min(7, 2, 0, -2, -7) // -7 16、percentage(number)
将數字轉化為百分比的表達形式。
percentage(1.2) // 120 17、random()
傳回 0-1 區間内的小數。
random() // 0.2783 18、random(number)
傳回 1 至 number 之間的整數，包括 1 和 limit。
random(10) // 4 19、round(number)
傳回最接近該數的一個整數，四舍五入。
round(15.20) // 15
round(15.80) // 16 清單(List)函數
三大注意點：
1、Sass 清單(List)函數用于處理清單，可以通路清單中的值，向清單添加元素，合并清單等。
2、Sass 清單是不可變的，是以在處理清單時，傳回的是一個新的清單，而不是在原有的清單上進行修改。
3、清單的起始索引值為 1，記住不是 0。
20、append(list, value, [separator])
将單個值 value 添加到清單尾部。separator 是分隔符，預設會自動偵測，或者指定為逗号或空格。
append((a b c), d) // a b c d
append((a b c), (d), comma) // a, b, c, d 21、index(list, value)
傳回元素 value 在清單中的索引位置。
index(a b c, b) // 2
index(a b c, f) // null 22、is-bracketed(list)
判斷清單中是否有中括号
is-bracketed([a b c]) // true
is-bracketed(a b c) // false 23、list-separator(list)
傳回一清單的分隔符類型。可以是空格或逗号。
list-separator(a b c) // "space"
list-separator(a, b, c) // "comma" 24、join(list1, list2, [separator, bracketed])
合并兩清單，将清單 list2 添加到清單 list1 的末尾。
separator 是分隔符，預設會自動偵測，或者指定為逗号或空格。
bracketed 預設會自動偵測是否有中括号，可以設定為 true 或 false。
join(a b c, d e f) // a b c d e f
join((a b c), (d e f), comma) // a, b, c, d, e, f
join(a b c, d e f, $bracketed: true) // [a b c d e f] 25、length(list)
傳回清單的長度
length(a b c) // 3 26、set-nth(list, n, value)
設定清單第 n 項的值為 value。
set-nth(a b c, 2, x) // a x c 27、nth(list, n)
擷取第 n 項的值。
nth(a b c, 3) // c 28、zip(lists)
将多個清單按照以相同索引值為一組，重新組成一個新的多元度清單。這個排列組合非常的人性，需要安排！
zip(1px 2px 3px, solid dashed dotted, red green blue)
// 1px solid red, 2px dashed green, 3px dotted blue Map(映射)函數
Sass Map 是不可變的，是以在處理 Map 對象時，傳回的是一個新的 Map 對象，而不是在原有的 Map 對象上進行修改。
Map(映射)對象是以一對或多對的 key/value 來表示。
瞧！key/value這不就來了嗎
29、map-get(map, key)
傳回 Map 中 key 所對應的 value(值)。如沒有對應的 key，則傳回 null 值。
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-get($font-sizes, "small") // 12px 30、map-has-key(map, key)
判斷 map 是否有對應的 key，存在傳回 true，否則傳回 false。
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-has-key($font-sizes, "big") // false 31、map-keys(map)
傳回 map 中所有的 key 組成的隊列。
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-keys($font-sizes) // "small", "normal, "large" 32、map-values(map)
傳回 map 中所有的 value 并生成一個隊列。
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-values($font-sizes) // 12px, 18px, 24px 33、map-merge(map1, map2)
合并兩個 map 形成一個新的 map 類型，即将 map2 添加到 map1的尾部
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
$font-sizes2: ("x-large": 30px, "xx-large": 36px)
map-merge($font-sizes, $font-sizes2)
//"small": 12px, "normal": 18px, "large": 24px, "x-large": 30px, "xx-large": 36px 34、map-remove(map, keys...)
移除 map 中的 keys，多個 key 使用逗号隔開。
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-remove($font-sizes, "small") // ("normal": 18px, "large": 24px)
map-remove($font-sizes, "small", "large") // ("normal": 18px) 選擇器函數
這個可算得上是進階操作了，沒有見過其他大神怎麼去使用。
35、is-superselector(super, sub)
比較兩個選擇器比對的範圍，即判斷 super 選擇器是否包含了 sub 選擇器所比對的範圍，是的話傳回 true，否則傳回 false。
is-superselector("div", "div.myInput") // true
is-superselector("div.myInput", "div") // false
is-superselector("div", "div") // true 36、selector-append(selectors)
将第二個 (也可以有多個) 添加到第一個選擇器的後面。selector.
selector-append("div", ".myInput") // div.myInput
selector-append(".warning", "__a") 結果: .warning__a 37、selector-nest(selectors)
傳回一個新的選擇器，該選擇器通過提供的清單選擇器生成一個嵌套的清單。
selector-nest("ul", "li") // ul li
selector-nest(".warning", "alert", "div") // .warning div, alert div 38、selector-parse(selector)
将字元串的選擇符 selector 轉換成選擇器隊列。
selector-parse("h1 .myInput .warning") // ('h1' '.myInput' '.warning') 39、selector-replace(selector, original, replacement)
給定一個選擇器，用replacement 替換 original 後傳回一個新的選擇器隊列。
selector-replace("p.warning", "p", "div") // div.warning 40、selector-unify(selector1, selector2)
将兩組選擇器合成一個複合選擇器。如兩個選擇器無法合成，則傳回 null 值。
selector-unify("myInput", ".disabled") // myInput.disabled
selector-unify("p", "h1") // null 41、simple-selectors(selectors)
将合成選擇器拆為單個選擇器。
simple-selectors("div.myInput") // div, .myInput
simple-selectors("div.myInput:before") // div, .myInput, :before 顔色函數（一）顔色設定
對顔色的設定和編輯永遠是前端設計的首要一步。
42、rgb(red, green, blue)
建立一個 Red-Green-Blue (RGB) 色。其中 R 是 "red" 表示紅色，而 G 是 "green" 綠色，B 是 "blue" 藍色。
rgb(0, 255, 255); 43、rgba(red, green, blue, alpha)
根據紅、綠、藍和透明度值建立一個顔色。
rgba(0, 255, 255, 0.3); 44、hsl(hue, saturation, lightness)
通過色相（hue）、飽和度(saturation)和亮度（lightness）的值建立一個顔色。
hsl(120, 100%, 50%); // 綠色
hsl(120, 100%, 75%); // 淺綠色
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // 柔和的綠色 45、hsla(hue, saturation, lightness, alpha)
通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值建立一個顔色。
hsl(120, 100%, 50%, 0.3); // 綠色帶有透明度
hsl(120, 100%, 75%, 0.3); // 淺綠色帶有透明度 46、grayscale(color)
将一個顔色變成灰色，相當于 desaturate( color,100%)。
grayscale(#7fffd4); // #c6c6c6 47、complement(color)
傳回一個補充色，相當于adjust-hue($color,180deg)。
complement(#7fffd4); // #ff7faa 48、invert(color, weight)
傳回一個反相色，紅、綠、藍色值倒過來，而透明度不變。
invert(white); // black 顔色函數（二）顔色擷取
看到下面這些參數，你會發現，這不是我美顔的常用設定嗎，這我熟呀。
49、red(color)
從一個顔色中擷取其中紅色值（0-255），可用于取出某個hex顔色中的紅色值。
red(#7fffd4); // 127
red(red); // 255 50、green(color)
從一個顔色中擷取其中綠色值（0-255）。
green(#7fffd4); // 255
green(blue); // 0 51、blue(color)
從一個顔色中擷取其中藍色值（0-255）。
blue(#7fffd4); // 212
blue(blue); // 255 52、hue(color)
傳回顔色在 HSL 色值中的角度值 (0deg - 255deg)。
hue(#7fffd4); // 160deg 53、saturation(color)
擷取一個顔色的飽和度值(0% - 100%)。
saturation(#7fffd4); // 100% 54、lightness(color)
擷取一個顔色的亮度值(0% - 100%)。
lightness(#7fffd4); // 74.9% 55、alpha(color)
傳回顔色的alpha，傳回值為0 或1。
alpha(#7fffd4); // 1 56、opacity(color)
擷取顔色透明度值(0-1)。
opacity(rgba(127, 255, 212, 0.5); // 0.5 顔色函數（三）顔色操作
57、mix(color1, color2, weight)
把兩種顔色混合起來。
weight 參數必須是 0% 到 100%。預設 weight 為 50%，表明新顔色各取 50% color1 和 color2 的色值相加。如果 weight 為 25%，那表明新顔色為 25% color1 和 75% color2 的色值相加。
58、adjust-hue(color, degrees)
通過改變一個顔色的色相值（-360deg - 360deg），建立一個新的顔色。
adjust-hue(#7fffd4, 80deg); // #8080ff 59、rgba(color, alpha)
根據紅、綠、藍和透明度值建立一個顔色。
rgba(#7fffd4, 30%); // rgba(127, 255, 212, 0.3) 60、lighten(color, amount)
通過改變顔色的亮度值（0% - 100%），讓顔色變亮，建立一個新的顔色。
61、darken(color, amount)
通過改變顔色的亮度值（0% - 100%），讓顔色變暗，建立一個新的顔色。
62、saturate(color, amount)
提高傳入顔色的色彩飽和度。等同于 adjust-color( color, saturation: amount)
63、desaturate(color, amount)
調低一個顔色的飽和度後産生一個新的色值。同樣，飽和度的取值區間在 0% ~ 100%。等同于 adjust-color(color, saturation: -amount)
64、opacify(color, amount)
降低顔色的透明度，取值在 0-1 之。等價于 adjust-color(color, alpha: amount)
65、fade-in(color, amount)
降低顔色的透明度，取值在 0-1 之。等價于 adjust-color(color, alpha: amount)
66、transparentize(color, amount)
提升顔色的透明度，取值在 0-1 之間。等價于 adjust-color(color, alpha: -amount)
67、fade-out(color, amount)
提升顔色的透明度，取值在 0-1 之間。等價于 adjust-color(color, alpha: -amount)
總結
函數那麼多，記肯定是記不住的，隻有是實際開發過程中使用到，當然也可以盡可能的去使用，對scss的函數的熟悉感才會有比較明顯的進步。
總結了一遍，有許多用過的，有部分看到别人用過的，有部分沒有看到過的，慢慢明白是怎樣一回事了，這可能就是這篇文章的收獲吧。
如果你覺得今天分享的内容對你有幫助，也請你分享給你的朋友，有可能也會對他有所幫助。
學習更多技能
請點選下方公衆号
![105道CSS 面試知識點總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)