4. sass实用函数归纳

4. sass实用函数归纳

字符串函数

1、quote(string)

给字符串添加引号

quote(xiaoming) // "xiaoming"

2、unquote(string)

移除字符串的引号

unquote("xiaoming") // xiaoming

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 daming!", " xiaoming", 6) //"Hello xiaoming daming!"

5、str-length(string)

返回字符串的长度。

str-length("xiaoming") // 8

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("XIAOMING") // "xiaoming"

8、to-upper-case(string)

将字符串转成大写

to-upper-case("xiaoming") // "XIAOMING"

9、unique-id()

返回一个无引号的随机字符串作为 id。

不过也只能保证在单次的 Sass 编译中确保这个 id 的唯一性。

unique-id() // 3sf6gsr3f

数字函数

10、abs(number)

返回一个数值的绝对值。

abs(17) // 17
abs(-17) // 17

11、comparable(num1, num2)

返回一个布尔值，判断 num1 与 num2 是否可以进行比较 ，注意是否可以比较，不是比较的结果。

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

12、ceil(number)

向上取整。

ceil(16.24) //17

13、floor(number)

向下取整。

floor(17.84) // 17

14、max(number…)

返回最大值。

max(15, 17, 19, 10, -13, -17) // 19

15、min(number…)

返回最小值。

min(17, 12, 10, -12, -17) // -17

16、percentage(number)

将数字转化为百分比的表达形式。

percentage(1.3) // 130

17、random()

返回 0-1 区间内的小数。

random() // 0.3652

18、random(number)

返回 1 至 number 之间的整数，包括 1 和 limit。

random(10) // 7

19、round(number)

返回最接近该数的一个整数，四舍五入。

round(17.20) // 17
round(16.70) // 17

列表(List)函数

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 d) // 5

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, 2) // b

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 来表示。

29、map-get(map, key)

返回 Map 中 key 所对应的 value 值。如没有对应的 key，则返回 null 值。

$font-sizes: ("small": 16px, "normal": 16px, "large": 32px)
map-get($font-sizes, "small") // 16px

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-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 的色值相加。

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)。