來(lái)源 | https://segmentfault.com/a/1190000041007461

說(shuō)明

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

1、quote(string)

quote(hello) //"hello"

2、unquote(string)

移除字符串的引號(hào)

unquote("hello") //hello

3、str-index(string,?substring)

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

 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)

返回字符串的長(zhǎng)度。

str-length("hello") //5

6、str-slice(string,?start,?end)

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

是不是感覺(jué)合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)

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

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

8、to-upper-case(string)

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

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

9、unique-id()

返回一個(gè)無(wú)引號(hào)的隨機(jī)字符串作為 id。

不過(guò)也只能保證在單次的 Sass 編譯中確保這個(gè) id 的唯一性。

unique-id() // 3a153b3ds

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

10、abs(number)

返回一個(gè)數(shù)值的絕對(duì)值。

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

11、comparable(num1,?num2)

返回一個(gè)布爾值，判斷?num1?與?num2?是否可以進(jìn)行比較 ，注意是否可以比較，不是比較的結(jié)果。

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)

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

percentage(1.2) // 120

17、random()

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

random() // 0.2783

18、random(number)

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

random(10) // 4

19、round(number)

返回最接近該數(shù)的一個(gè)整數(shù)，四舍五入。

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

列表(List)函數(shù)

三大注意點(diǎn)：

1、Sass 列表(List)函數(shù)用于處理列表，可以訪問(wèn)列表中的值，向列表添加元素，合并列表等。

2、Sass 列表是不可變的，因此在處理列表時(shí)，返回的是一個(gè)新的列表，而不是在原有的列表上進(jìn)行修改。

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

20、append(list,?value, [separator])

將單個(gè)值?value?添加到列表尾部。separator?是分隔符，默認(rèn)會(huì)自動(dòng)偵測(cè)，或者指定為逗號(hào)或空格。

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)

判斷列表中是否有中括號(hào)

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

23、list-separator(list)

返回一列表的分隔符類型?？梢允强崭窕蚨禾?hào)。

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

24、join(list1,?list2, [separator, bracketed])

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

separator?是分隔符，默認(rèn)會(huì)自動(dòng)偵測(cè)，或者指定為逗號(hào)或空格。

bracketed?默認(rèn)會(huì)自動(dòng)偵測(cè)是否有中括號(hào)，可以設(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]

25、length(list)

返回列表的長(zhǎng)度

length(a b c) // 3

26、set-nth(list,?n,?value)

設(shè)置列表第?n?項(xiàng)的值為?value。

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

27、nth(list,?n)

獲取第?n?項(xiàng)的值。

nth(a b c, 3) // c

28、zip(lists)

將多個(gè)列表按照以相同索引值為一組，重新組成一個(gè)新的多維度列表。這個(gè)排列組合非常的人性，需要安排！

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

Map(映射)函數(shù)

Sass Map 是不可變的，因此在處理 Map 對(duì)象時(shí)，返回的是一個(gè)新的 Map 對(duì)象，而不是在原有的 Map 對(duì)象上進(jìn)行修改。

Map(映射)對(duì)象是以一對(duì)或多對(duì)的 key/value 來(lái)表示。

瞧！key/value這不就來(lái)了嗎

29、map-get(map,?key)

返回 Map 中?key?所對(duì)應(yīng)的 value(值)。如沒(méi)有對(duì)應(yīng)的 key，則返回 null 值。

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

30、map-has-key(map,?key)

判斷?map?是否有對(duì)應(yīng)的?key，存在返回 true，否則返回 false。

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

31、map-keys(map)

返回?map?中所有的 key 組成的隊(duì)列。

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

32、map-values(map)

返回?map?中所有的 value 并生成一個(gè)隊(duì)列。

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

33、map-merge(map1,?map2)

合并兩個(gè) map 形成一個(gè)新的 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，多個(gè) key 使用逗號(hào)隔開(kāi)。

$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ù)

這個(gè)可算得上是高級(jí)操作了，沒(méi)有見(jiàn)過(guò)其他大神怎么去使用。

35、is-superselector(super,?sub)

比較兩個(gè)選擇器匹配的范圍，即判斷?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)

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

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

37、selector-nest(selectors)

返回一個(gè)新的選擇器，該選擇器通過(guò)提供的列表選擇器生成一個(gè)嵌套的列表。

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

38、selector-parse(selector)

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

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

39、selector-replace(selector,?original,?replacement)

給定一個(gè)選擇器，用replacement 替換 original 后返回一個(gè)新的選擇器隊(duì)列。

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

40、selector-unify(selector1,?selector2)

將兩組選擇器合成一個(gè)復(fù)合選擇器。如兩個(gè)選擇器無(wú)法合成，則返回 null 值。

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

41、simple-selectors(selectors)

將合成選擇器拆為單個(gè)選擇器。

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

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

對(duì)顏色的設(shè)置和編輯永遠(yuǎn)是前端設(shè)計(jì)的首要一步。

42、rgb(red,?green,?blue)

創(chuàng)建一個(gè) Red-Green-Blue (RGB) 色。其中 R 是 "red" 表示紅色，而 G 是 "green" 綠色，B 是 "blue" 藍(lán)色。

rgb(0, 255, 255);

43、rgba(red,?green,?blue,?alpha)

根據(jù)紅、綠、藍(lán)和透明度值創(chuàng)建一個(gè)顏色。

rgba(0, 255, 255, 0.3);

44、hsl(hue,?saturation,?lightness)

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

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

45、hsla(hue,?saturation,?lightness,?alpha)

通過(guò)色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創(chuàng)建一個(gè)顏色。

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

46、grayscale(color)

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

grayscale(#7fffd4); // #c6c6c6

47、complement(color)

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

complement(#7fffd4); // #ff7faa

48、invert(color,?weight)

返回一個(gè)反相色，紅、綠、藍(lán)色值倒過(guò)來(lái)，而透明度不變。

invert(white); // black

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

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

49、red(color)

從一個(gè)顏色中獲取其中紅色值（0-255），可用于取出某個(gè)hex顏色中的紅色值。

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

50、green(color)

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

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

51、blue(color)

從一個(gè)顏色中獲取其中藍(lán)色值（0-255）。

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

52、hue(color)

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

hue(#7fffd4); // 160deg

53、saturation(color)

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

saturation(#7fffd4); // 100%

54、lightness(color)

獲取一個(gè)顏色的亮度值(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

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

57、mix(color1,?color2,?weight)

把兩種顏色混合起來(lái)。

weight?參數(shù)必須是 0% 到 100%。默認(rèn) weight 為 50%，表明新顏色各取 50% color1 和 color2 的色值相加。如果 weight 為 25%，那表明新顏色為 25% color1 和 75% color2 的色值相加。

58、adjust-hue(color,?degrees)

通過(guò)改變一個(gè)顏色的色相值（-360deg - 360deg），創(chuàng)建一個(gè)新的顏色。

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

59、rgba(color,?alpha)

根據(jù)紅、綠、藍(lán)和透明度值創(chuàng)建一個(gè)顏色。

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

60、lighten(color,?amount)

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

61、darken(color,?amount)

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

62、saturate(color,?amount)

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

63、desaturate(color,?amount)

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

64、opacify(color,?amount)

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

65、fade-in(color,?amount)

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

66、transparentize(color,?amount)

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

67、fade-out(color,?amount)

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

總結(jié)

函數(shù)那么多，記肯定是記不住的，只有是實(shí)際開(kāi)發(fā)過(guò)程中使用到，當(dāng)然也可以盡可能的去使用，對(duì)scss的函數(shù)的熟悉感才會(huì)有比較明顯的進(jìn)步。

總結(jié)了一遍，有許多用過(guò)的，有部分看到別人用過(guò)的，有部分沒(méi)有看到過(guò)的，慢慢明白是怎樣一回事了，這可能就是這篇文章的收獲吧。

如果你覺(jué)得今天分享的內(nèi)容對(duì)你有幫助，也請(qǐng)你分享給你的朋友，有可能也會(huì)對(duì)他有所幫助。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)