【Sass/SCSS】我花4小時整理了的Sass的函數(shù)

博客說明

文章所涉及的資料來自互聯(lián)網(wǎng)整理和個人總結(jié)敞峭，意在于個人學(xué)習(xí)和經(jīng)驗匯總悔常，如有什么地方侵權(quán)，請聯(lián)系本人刪除框仔，謝謝！

說明

Sass 定義了各種類型的函數(shù)拄养，這些函數(shù)可以通過 CSS 語句直接調(diào)用离斩。

可以看到Sass的函數(shù)功能已經(jīng)相當(dāng)豐富了。

整理了Sass的主要函數(shù)瘪匿，重點在于后面的顏色函數(shù)跛梗，設(shè)計非常的銀杏！

String(字符串) 函數(shù)

quote(string)

給字符串添加引號

quote(hello) //"hello"

unquote(string)

移除字符串的引號

unquote("hello") //hello

str-index(string, substring)

返回 substring 子字符串第一次在 string 中出現(xiàn)的位置棋弥。如果沒有匹配到子字符串核偿，則返回 null。區(qū)分大小寫顽染。

 str-index(abcd, a) // 1 
 str-index(abcd, ab) // 1 
 str-index(abcd, X)  // null 

str-insert(string, insert, index)

在字符串 string 中 index 位置插入 insert漾岳。

str-insert("Hello world!", " xiaoming", 6) //"Hello xiaoming world!"

str-length(string)

返回字符串的長度。

str-length("hello") //5

str-slice(string, start, end)

從 string 中截取子字符串粉寞，通過 start-at 和 end-at 設(shè)置始末位置蝗羊，未指定結(jié)束索引值則默認截取到字符串末尾。

是不是感覺合js的操作有些類似仁锯。

str-slice("abcd", 2, 3)   => "bc" 
str-slice("abcd", 2)      => "bcd" 
str-slice("abcd", -3, -2) => "bc" 
str-slice("abcd", 2, -2)  => "bc"

to-lower-case(string)

將字符串轉(zhuǎn)成小寫

to-lower-case("HELLO") // "hello"

to-upper-case(string)

將字符串轉(zhuǎn)成大寫

to-upper-case("hello") // "HELLO"

unique-id()

返回一個無引號的隨機字符串作為 id耀找。

不過也只能保證在單次的 Sass 編譯中確保這個 id 的唯一性。

unique-id() // 3a153b3ds

數(shù)字函數(shù)

abs(number)

返回一個數(shù)值的絕對值业崖。

abs(13) // 13
abs(-13) // 13

comparable(num1, num2)

返回一個布爾值野芒，判斷 num1 與 num2 是否可以進行比較 ，注意是否可以比較双炕，不是比較的結(jié)果狞悲。

comparable(15px, 10px) // true 
comparable(20mm, 1cm) // true 
comparable(35px, 2em) // false

ceil(number)

向上取整 。

ceil(13.24) //14

floor(number)

向下取整 妇斤。

floor(15.84) // 15

max(number...)

返回最大值 摇锋。

max(5, 7, 9, 0, -3, -7) // 9

min(number...)

返回最小值 丹拯。

min(7, 2, 0, -2, -7) // -7

percentage(number)

將數(shù)字轉(zhuǎn)化為百分比的表達形式。

percentage(1.2) // 120

random()

返回 0-1 區(qū)間內(nèi)的小數(shù)荸恕。

random() // 0.2783

random(number)

返回 1 至 number 之間的整數(shù)乖酬，包括 1 和 limit。

random(10) // 4

round(number)

返回最接近該數(shù)的一個整數(shù)融求，四舍五入咬像。

round(15.20) // 15 
round(15.80) // 16

列表(List)函數(shù)

三大注意點：

1、Sass 列表(List)函數(shù)用于處理列表生宛，可以訪問列表中的值县昂，向列表添加元素，合并列表等陷舅。

2倒彰、Sass 列表是不可變的，因此在處理列表時莱睁，返回的是一個新的列表待讳，而不是在原有的列表上進行修改。

3缩赛、列表的起始索引值為 1耙箍，記住不是 0。

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

index(list, value)

返回元素 value 在列表中的索引位置汁针。

index(a b c, b) // 2 
index(a b c, f) // null

is-bracketed(list)

判斷列表中是否有中括號

is-bracketed([a b c]) // true 
is-bracketed(a b c) // false

list-separator(list)

返回一列表的分隔符類型⊙饩。可以是空格或逗號施无。

list-separator(a b c) // "space" 
list-separator(a, b, c) // "comma"

join(list1, list2, [separator, bracketed])

合并兩列表，將列表 list2 添加到列表 list1 的末尾必孤。

separator 是分隔符猾骡，默認會自動偵測，或者指定為逗號或空格敷搪。

bracketed 默認會自動偵測是否有中括號兴想，可以設(shè)置為 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]

length(list)

返回列表的長度

length(a b c) // 3

set-nth(list, n, value)

設(shè)置列表第 n 項的值為 value赡勘。

set-nth(a b c, 2, x) // a x c

nth(list, n)

獲取第 n 項的值嫂便。

nth(a b c, 3) // c

zip(lists)

將多個列表按照以相同索引值為一組，重新組成一個新的多維度列表闸与。這個排列組合非常的人性毙替，需要安排岸售！

zip(1px 2px 3px, solid dashed dotted, red green blue) 
// 1px solid red, 2px dashed green, 3px dotted blue

Map(映射)函數(shù)

Sass Map 是不可變的，因此在處理 Map 對象時厂画，返回的是一個新的 Map 對象凸丸，而不是在原有的 Map 對象上進行修改。

Map(映射)對象是以一對或多對的 key/value 來表示木羹。

瞧甲雅！key/value這不就來了嗎

map-get(map, key)

返回 Map 中 key 所對應(yīng)的 value(值)解孙。如沒有對應(yīng)的 key坑填，則返回 null 值。

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-get($font-sizes, "small") // 12px

map-has-key(map, key)

判斷 map 是否有對應(yīng)的 key弛姜，存在返回 true脐瑰，否則返回 false。

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-has-key($font-sizes, "big") // false

map-keys(map)

返回 map 中所有的 key 組成的隊列廷臼。

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-keys($font-sizes) // "small", "normal, "large"

map-values(map)

返回 map 中所有的 value 并生成一個隊列苍在。

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-values($font-sizes) // 12px, 18px, 24px

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

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)

選擇器函數(shù)

這個可算得上是高級操作了，沒有見過其他大神怎么去使用莱没。

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

selector-append(selectors)

將第二個 (也可以有多個) 添加到第一個選擇器的后面。 selector.

selector-append("div", ".myInput") // div.myInput 
selector-append(".warning", "__a") 結(jié)果: .warning__a

selector-nest(selectors)

返回一個新的選擇器嘹裂，該選擇器通過提供的列表選擇器生成一個嵌套的列表妄壶。

selector-nest("ul", "li") // ul li 
selector-nest(".warning", "alert", "div") // .warning div, alert div

selector-parse(selector)

將字符串的選擇符 selector 轉(zhuǎn)換成選擇器隊列。

selector-parse("h1 .myInput .warning") // ('h1' '.myInput' '.warning')

selector-replace(selector, original, replacement)

給定一個選擇器寄狼，用replacement 替換 original 后返回一個新的選擇器隊列丁寄。

selector-replace("p.warning", "p", "div") // div.warning

selector-unify(selector1, selector2)

將兩組選擇器合成一個復(fù)合選擇器。如兩個選擇器無法合成泊愧，則返回 null 值伊磺。

selector-unify("myInput", ".disabled") // myInput.disabled 
selector-unify("p", "h1") // null

simple-selectors(selectors)

將合成選擇器拆為單個選擇器。

simple-selectors("div.myInput") // div, .myInput 
simple-selectors("div.myInput:before") // div, .myInput, :before

顏色函數(shù)（一）顏色設(shè)置

對顏色的設(shè)置和編輯永遠是前端設(shè)計的首要一步拼卵。

rgb(red, green, blue)

創(chuàng)建一個 Red-Green-Blue (RGB) 色酣溃。其中 R 是 "red" 表示紅色，而 G 是 "green" 綠色拒垃，B 是 "blue" 藍色。

rgb(0, 255, 255);

rgba(red, green, blue, alpha)

根據(jù)紅壤蚜、綠徊哑、藍和透明度值創(chuàng)建一個顏色。

rgba(0, 255, 255, 0.3);

hsl(hue, saturation, lightness)

通過色相（hue）莺丑、飽和度(saturation)和亮度（lightness）的值創(chuàng)建一個顏色。

hsl(120, 100%, 50%); // 綠色 
hsl(120, 100%, 75%); // 淺綠色 
hsl(120, 100%, 25%); // dark green 
hsl(120, 60%, 70%); // 柔和的綠色 

hsla(hue, saturation, lightness, alpha)

通過色相（hue）梢莽、飽和度(saturation)萧豆、亮度（lightness）和透明（alpha）的值創(chuàng)建一個顏色昏名。

hsl(120, 100%, 50%, 0.3); // 綠色帶有透明度 
hsl(120, 100%, 75%, 0.3); // 淺綠色帶有透明度

grayscale(color)

將一個顏色變成灰色，相當(dāng)于 desaturate( color,100%)轻局。

grayscale(#7fffd4); // #c6c6c6

complement(color)

返回一個補充色洪鸭，相當(dāng)于adjust-hue($color,180deg)。

complement(#7fffd4); // #ff7faa

invert(color, weight)

返回一個反相色仑扑，紅、綠镇饮、藍色值倒過來，而透明度不變梅肤。

invert(white); // black

顏色函數(shù)（二）顏色獲取

看到下面這些參數(shù)邑茄，你會發(fā)現(xiàn)，這不是我美顏的常用設(shè)置嗎肺缕，這我熟呀。

red(color)

從一個顏色中獲取其中紅色值（0-255）浮梢，可用于取出某個hex顏色中的紅色值彤路。

red(#7fffd4); // 127 
red(red); // 255

green(color)

從一個顏色中獲取其中綠色值（0-255）。

green(#7fffd4); // 255 
green(blue); // 0

blue(color)

從一個顏色中獲取其中藍色值（0-255）远豺。

blue(#7fffd4); // 212 
blue(blue); // 255

hue(color)

返回顏色在 HSL 色值中的角度值 (0deg - 255deg)。

hue(#7fffd4); // 160deg

saturation(color)

獲取一個顏色的飽和度值(0% - 100%)惊来。

saturation(#7fffd4); // 100%

lightness(color)

獲取一個顏色的亮度值(0% - 100%)棺滞。

lightness(#7fffd4); // 74.9%

alpha(color)

返回顏色的alpha，返回值為0 或1枉证。

alpha(#7fffd4); // 1

opacity(color)

獲取顏色透明度值(0-1)。

opacity(rgba(127, 255, 212, 0.5); // 0.5

顏色函數(shù)（三）顏色操作

mix(color1, color2, weight)

把兩種顏色混合起來锰瘸。

weight 參數(shù)必須是 0% 到 100%昂灵。默認 weight 為 50%，表明新顏色各取 50% color1 和 color2 的色值相加管削。如果 weight 為 25%撑螺，那表明新顏色為 25% color1 和 75% color2 的色值相加。

adjust-hue(color, degrees)

通過改變一個顏色的色相值（-360deg - 360deg）含潘，創(chuàng)建一個新的顏色线婚。

adjust-hue(#7fffd4, 80deg); // #8080ff

rgba(color, alpha)

根據(jù)紅、綠漱逸、藍和透明度值創(chuàng)建一個顏色游沿。

rgba(#7fffd4, 30%); // rgba(127, 255, 212, 0.3)

lighten(color, amount)

通過改變顏色的亮度值（0% - 100%），讓顏色變亮袋坑，創(chuàng)建一個新的顏色眯勾。

darken(color, amount)

通過改變顏色的亮度值（0% - 100%），讓顏色變暗镶柱，創(chuàng)建一個新的顏色。

saturate(color, amount)

提高傳入顏色的色彩飽和度鞋屈。等同于 adjust-color( color, saturation: amount)

desaturate(color, amount)

調(diào)低一個顏色的飽和度后產(chǎn)生一個新的色值故觅。同樣，飽和度的取值區(qū)間在 0% ~ 100%权旷。等同于 adjust-color(color, saturation: -amount)

opacify(color, amount)

降低顏色的透明度贯溅，取值在 0-1 之。等價于 adjust-color(color, alpha: amount)

fade-in(color, amount)

降低顏色的透明度译柏，取值在 0-1 之姐霍。等價于 adjust-color(color, alpha: amount)

transparentize(color, amount)

提升顏色的透明度，取值在 0-1 之間胯府。等價于 adjust-color(color, alpha: -amount)

fade-out(color, amount)

提升顏色的透明度恨胚，取值在 0-1 之間。等價于 adjust-color(color, alpha: -amount)

總結(jié)

函數(shù)那么多侣签，記肯定是記不住的急迂，只有是實際開發(fā)過程中使用到，當(dāng)然也可以盡可能的去使用猴娩，對scss的函數(shù)的熟悉感才會有比較明顯的進步∶總結(jié)了一遍蟆豫，有許多用過的，有部分看到別人用過的栈幸，有部分沒有看到過的帮辟，慢慢明白是怎樣一回事了，這可能就是這篇文章的收獲吧芍锚。

感謝

萬能的網(wǎng)絡(luò)

以及勤勞的自己蔓榄，個人博客，GitHub測試渣触，GitHub

公眾號-歸子莫壹若，小程序-小歸博客