【Sass/SCSS】我花4小时整理了的Sass的函数
【Sass/SCSS】我花4小时整理了的Sass的函数
博客说明
文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！
说明
Sass 定义了各种类型的函数，这些函数可以通过 CSS 语句直接调用。
可以看到Sass的函数功能已经相当丰富了。
整理了Sass的主要函数，重点在于后面的颜色函数，设计非常的银杏！
String(字符串) 函数
quote(string)
给字符串添加引号
quote(hello) //"hello"
unquote(string)
移除字符串的引号
unquote("hello") //hello
str-index(string, substring)
返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串，则返回 null。区分大小写。
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 设置始末位置，未指定结束索引值则默认截取到字符串末尾。
是不是感觉合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)
将字符串转成小写
to-lower-case("HELLO") // "hello"
to-upper-case(string)
将字符串转成大写
to-upper-case("hello") // "HELLO"
unique-id()
返回一个无引号的随机字符串作为 id。
不过也只能保证在单次的 Sass 编译中确保这个 id 的唯一性。
unique-id() // 3a153b3ds
数字函数
abs(number)
返回一个数值的绝对值。
abs(13) // 13
abs(-13) // 13
comparable(num1, num2)
返回一个布尔值，判断 num1 与 num2 是否可以进行比较 ，注意是否可以比较，不是比较的结果。
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)
将数字转化为百分比的表达形式。
percentage(1.2) // 120
random()
返回 0-1 区间内的小数。
random() // 0.2783
random(number)
返回 1 至 number 之间的整数，包括 1 和 limit。
random(10) // 4
round(number)
返回最接近该数的一个整数，四舍五入。
round(15.20) // 15
round(15.80) // 16
列表(List)函数
三大注意点：
1、Sass 列表(List)函数用于处理列表，可以访问列表中的值，向列表添加元素，合并列表等。
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 默认会自动侦测是否有中括号，可以设置为 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)
设置列表第 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(映射)函数
Sass Map 是不可变的，因此在处理 Map 对象时，返回的是一个新的 Map 对象，而不是在原有的 Map 对象上进行修改。
Map(映射)对象是以一对或多对的 key/value 来表示。
瞧！key/value这不就来了吗
map-get(map, key)
返回 Map 中 key 所对应的 value(值)。如没有对应的 key，则返回 null 值。
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-get($font-sizes, "small") // 12px
map-has-key(map, key)
判断 map 是否有对应的 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)
选择器函数
这个可算得上是高级操作了，没有见过其他大神怎么去使用。
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") 结果: .warning__a
selector-nest(selectors)
返回一个新的选择器，该选择器通过提供的列表选择器生成一个嵌套的列表。
selector-nest("ul", "li") // ul li
selector-nest(".warning", "alert", "div") // .warning div, alert div
selector-parse(selector)
将字符串的选择符 selector 转换成选择器队列。
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)
将两组选择器合成一个复合选择器。如两个选择器无法合成，则返回 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
颜色函数（一）颜色设置
对颜色的设置和编辑永远是前端设计的首要一步。
rgb(red, green, blue)
创建一个 Red-Green-Blue (RGB) 色。其中 R 是 "red" 表示红色，而 G 是 "green" 绿色，B 是 "blue" 蓝色。
rgb(0, 255, 255);
rgba(red, green, blue, alpha)
根据红、绿、蓝和透明度值创建一个颜色。
rgba(0, 255, 255, 0.3);
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%); // 柔和的绿色
hsla(hue, saturation, lightness, alpha)
通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色。
hsl(120, 100%, 50%, 0.3); // 绿色带有透明度
hsl(120, 100%, 75%, 0.3); // 浅绿色带有透明度
grayscale(color)
将一个颜色变成灰色，相当于 desaturate( color,100%)。
grayscale(#7fffd4); // #c6c6c6
complement(color)
返回一个补充色，相当于adjust-hue($color,180deg)。
complement(#7fffd4); // #ff7faa
invert(color, weight)
返回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
invert(white); // black
颜色函数（二）颜色获取
看到下面这些参数，你会发现，这不是我美颜的常用设置吗，这我熟呀。
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
颜色函数（三）颜色操作
mix(color1, color2, weight)
把两种颜色混合起来。
weight 参数必须是 0% 到 100%。默认 weight 为 50%，表明新颜色各取 50% color1 和 color2 的色值相加。如果 weight 为 25%，那表明新颜色为 25% color1 和 75% color2 的色值相加。
adjust-hue(color, degrees)
通过改变一个颜色的色相值（-360deg - 360deg），创建一个新的颜色。
adjust-hue(#7fffd4, 80deg); // #8080ff
rgba(color, alpha)
根据红、绿、蓝和透明度值创建一个颜色。
rgba(#7fffd4, 30%); // rgba(127, 255, 212, 0.3)
lighten(color, amount)
通过改变颜色的亮度值（0% - 100%），让颜色变亮，创建一个新的颜色。
darken(color, amount)
通过改变颜色的亮度值（0% - 100%），让颜色变暗，创建一个新的颜色。
saturate(color, amount)
提高传入颜色的色彩饱和度。等同于 adjust-color( color, saturation: amount)
desaturate(color, amount)
调低一个颜色的饱和度后产生一个新的色值。同样，饱和度的取值区间在 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)
总结
函数那么多，记肯定是记不住的，只有是实际开发过程中使用到，当然也可以尽可能的去使用，对scss的函数的熟悉感才会有比较明显的进步。总结了一遍，有许多用过的，有部分看到别人用过的，有部分没有看到过的，慢慢明白是怎样一回事了，这可能就是这篇文章的收获吧。
感谢
万能的网络
公众号-归子莫，小程序-小归博客
