sass内置函数汇总

一、Sass String(字符串) 函数

quote(string)	给字符串添加引号。 实例: quote(runoob) 结果: "runoob"
str-index(string, substring)	返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串，则返回 null。 实例: str-index(abcd, a) => 1 str-index(abcd, ab) => 1 str-index(abcd, X) => null str-index(abcd, c) => 3
str-insert(string, insert, index)	在字符串 string 中 index 位置插入 insert。 实例: str-insert("Hello world!", " runoob", 6) 结果: "Hello runoob world!"
str-length(string)	返回字符串的长度。 实例: str-length("runoob") 结果: 6
str-slice(string, start, end)	从 string 中截取子字符串，通过 start-at 和 end-at 设置始末位置，未指定结束索引值则默认截取到字符串末尾。 实例: 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("RUNOOB") 结果: "runoob"
to-upper-case(string)	将字符串转成大写 实例: to-upper-case("runoob") 结果: "RUNOOB"
unique-id()	返回一个无引号的随机字符串作为 id。不过也只能保证在单次的 Sass 编译中确保这个 id 的唯一性。 实例: unique-id() Result: uad053b1c
unquote(string)	移除字符串的引号 实例: unquote("runoob") 结果: runoob

 二、Sass 数字函数

abs(number)	返回一个数值的绝对值。 实例: abs(15) 结果: 15 abs(-15) 结果: 15
ceil(number)	向上取整 实例: ceil(15.20) 结果: 16
comparable(num1, num2)	返回一个布尔值，判断 num1 与 num2 是否可以进行比较 实例: comparable(15px, 10px) 结果: true comparable(20mm, 1cm) 结果: true comparable(35px, 2em) 结果: false
floor(number)	向下取整 实例: floor(15.80) 结果: 15
max(number...)	返回最大值 实例: max(5, 7, 9, 0, -3, -7) 结果: 9
min(number...)	返回最小值 实例: min(5, 7, 9, 0, -3, -7) 结果: -7
percentage(number)	将数字转化为百分比的表达形式。 实例: percentage(1.2) 结果: 120
random()	返回 0-1 区间内的小数， 实例: random() 结果: 0.45673
random(number)	返回 1 至 number 之间的整数，包括 1 和 limit。 实例: random(6) 结果: 4
round(number)	返回最接近该数的一个整数，四舍五入。 实例: round(15.20) 结果: 15 round(15.80) 结果: 16

三、Sass 列表(List)函数

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
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
list-separator(list)	返回一列表的分隔符类型。可以是空格或逗号。 实例: list-separator(a b c) 结果: "space" list-separator(a, b, c) 结果: "comma"
nth(list, n)	获取第 n 项的值。 实例: nth(a b c, 3) 结果: c
set-nth(list, n, value)	设置列表第 n 项的值为 value。 实例: set-nth(a b c, 2, x) 结果: a x c
zip(lists)	将多个列表按照以相同索引值为一组，重新组成一个新的多维度列表。 实例: zip(1px 2px 3px, solid dashed dotted, red green blue) 结果: 1px solid red, 2px dashed green, 3px dotted blue

四、Sass Map(映射)函数

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-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)
map-values(map)	返回 map 中所有的 value 并生成一个队列。 实例: $font-sizes: ("small": 12px, "normal": 18px, "large": 24px) map-values($font-sizes) 结果: 12px, 18px, 24px

五、Sass 选择器函数

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-extend(selector, extendee, extender)
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

六、Sass Introspection 函数

call(function, arguments...)	函数的动态调用，即调用函数 function 参数为 arguments，并返回结果。
content-exists()	查看当前的混入是否传递 @content 块。
feature-exists(feature)	检查当前的 Sass 实现是否支持该特性。 实例: feature-exists("at-error"); 结果: true
function-exists(functionname)	检测指定的函数是否存在 实例: function-exists("nonsense") 结果: false
get-function(functionname, css: false)	返回指定函数。如果 css 为 true，则返回纯 CSS 函数。
global-variable-exists(variablename)	检测某个全局变量是否定义。 实例: variable-exists(a) 结果: true
inspect(value)	返回一个字符串的表示形式，value 是一个 sass 表达式。
mixin-exists(mixinname)	检测指定混入 (mixinname) 是否存在。 实例: mixin-exists("important-text") 结果: true
type-of(value)	返回值类型。返回值可以是 number, string, color, list, map, bool, null, function, arglist。 实例: type-of(15px) 结果: number type-of(#ff0000) 结果: color
unit(number)	返回传入数字的单位（或复合单位）。 实例: unit(15px) 结果: px
unitless(number)	返回一个布尔值，判断传入的数字是否带有单位。 实例: unitless(15px) 结果: false unitless(15) 结果: true
variable-exists(variablename)	判断变量是否在当前的作用域下。 实例: variable-exists(b) 结果: true