一、字符串函数

sass：

// unquote($string)：删除字符串最外层的一对引号。
.test1content: unquote('Hello Sass!')
.test2content: unquote("I'm Web Designer")
// quote($string)：给字符串添加引号。使用quote()函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。同时quote()碰到特殊符号，比如：!、?、>等，除中折号-和下划线_都需要使用双引号括起，否则编译器在进行编译的时候同样会报错
.test3content: quote(unquote('Hello Sass!'))
// To-upper-case()：将字符串小写字母转换成大写字母。
.test4content: To-upper-case(aaaaa)content: To-upper-case(aA-aAAA-aaa)
// To-lower-case()：将字符串小写字母转换成大写字母。
.test5content: To-lower-case(AAAAA)content: To-lower-case(aA-aAAA-aaa)

css：

.test1 {content: Hello Sass!;
}.test2 {content: I'm Web Designer;
}.test3 {content: "Hello Sass!";
}.test4 {content: To-upper-case(aaaaa);content: To-upper-case(aA-aAAA-aaa);
}.test5 {content: To-lower-case(AAAAA);content: To-lower-case(aA-aAAA-aaa);
}/*# sourceMappingURL=style.css.map */

二、数字函数

sass：

// percentage($value)：将一个不带单位的数转换成百分比值；
.test1width: percentage(.2)
// round($value)：将数值四舍五入，转换成一个最接近的整数；
.test2width: round(20.2%)
.test3margin-left: round(-1.1px)
// ceil($value)：向上取整
.test4width: ceil(20.2%)
.test5margin-left: ceil(-1.1px)
// floor($value)：向下取整
.test6width: floor(20.2%)
.test7margin-left: floor(-1.1px)
// abs($value)：返回一个数的绝对值；
.test8width: abs(-1px / 2px)
// min($numbers…)：找出几个数值之间的最小值，数值的单位要统一，但可以有不带单位的数值。CSS4中已经支持这一函数，所以编译后与编译前并无差别，除非参数列表中有变量或函数返回值。
.test9width: min(1%, 2, 3%)
// max($numbers…)：找出几个数值之间的最大值，数值的单位要统一，但可以有不带单位的数值。CSS4中已经支持这一函数，所以编译后与编译前并无差别，除非参数列表中有变量或函数返回值。
$val: 1%
.test10width: max($val, 2, 3%)
// random(): 返回[0, 1)内的随机数
.test11width: floor(random() * 10) + px
// random(n): 返回[1, n)内的随机数
.test12width: random(10) + px

css：

.test1 {width: 20%;
}.test2 {width: 20%;
}.test3 {margin-left: -1px;
}.test4 {width: 21%;
}.test5 {margin-left: -1px;
}.test6 {width: 20%;
}.test7 {margin-left: -2px;
}.test8 {width: 0.5;
}.test9 {width: min(1%, 2, 3%);
}.test10 {width: 3%;
}.test11 {width: 8px;
}.test12 {width: 7px;
}/*# sourceMappingURL=style.css.map */

三、列表函数

sass：

// 返回列表$list的长度值；
// length($list)
.test1height: length(10px) + pxwidth: length(10px (20em, 30em) 40px) + px
// 返回列表$list中第$n个元素
// nth($list, $n)
.test2width: nth(10px 20px 30px, 2)
// 连接列表$list1和$list2成一个新列表，并且使用$operator作为分隔符，其中$separator可以是auto（自动）、comma（逗号）和space（空格）；
// join($list1, $list2, [$separator])
.test3margin: join((10px 20px),(10px 20px), space)
// 将值$val放在列表$list的最后，并且使用$operator作为分隔符，其中$separator的用法和join()函数相同；
// append($list1, $val, [$separator])
.test4margin: append((10px 20px), 10px)
// 将几个列表结合成一个多维的列表；
// zip($lists…)
.test5text-shadow: zip(3px 2px 1px, 5px 2px 4px, black grey white)
// 返回值$value在列表$list中的位置。如果找不到就返回false
// index($list, $value)
.test6width: index(1px solid red, 1px) + px

css：

.test1 {height: 1px;width: 3px;
}.test2 {width: 20px;
}.test3 {margin: 10px 20px 10px 20px;
}.test4 {margin: 10px 20px 10px;
}.test5 {text-shadow: 3px 5px black, 2px 2px grey, 1px 4px white;
}.test6 {width: 1px;
}/*# sourceMappingURL=style.css.map */

四、颜色函数

• RGB颜色函数

sass：

// 根据红、绿、蓝三个值创建一个颜色；
// rgb($red, $green, $blue)
.test1color: rgb(46, 254, 0)
// 根据红、绿、蓝和透明度值创建一个颜色；
// rgba($red, $green, $blue, $alpha)
// rgba($color, $alpha)
.test2color: rgba(46, 254, 0, 0.7)background-color: rgba(#ff0, 0.5)
// 从一个颜色中获取其中红色值；
// red($color)
.test3color: red(#f09)
// 从一个颜色中获取其中绿色值；
// green($color)
.test4color: green(#f09)
// 从一个颜色中获取其中蓝色值；
// blue($color)
.test5color: blue(#f09)
// 把两种颜色混合在一起。$color-1和$color-2指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。$weight为合并的比例（选择权重），默认值为50%，其取值范围是0~1之间。它是每个RGB的百分比来衡量，当然透明度也会有一定的权重。默认的比例是50%，这意味着两个颜色各占一半，如果指定的比例是25%，这意味着第一个颜色所占比例为25%，第二个颜色所占比例为75%。
// mix($color-1,$color-2,[$weight])
.test6color: mix(#f00, #00f, 25%)

css：

.test1 {color: #2efe00;
}.test2 {color: rgba(46, 254, 0, 0.7);background-color: rgba(255, 255, 0, 0.5);
}.test3 {color: 255;
}.test4 {color: 0;
}.test5 {color: 153;
}.test6 {color: #4000bf;
}/*# sourceMappingURL=style.css.map */

• HSL颜色函数

sass：

$color: #ad141e
$amount: 10%
$degrees: 30deg
// 通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
// hsl($hue,$saturation,$lightness)// 通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
// hsla($hue,$saturation,$lightness,$alpha)// 从一个颜色中获取色相（hue）值；
// hue($color)// 从一个颜色中获取饱和度（saturation）值；
// saturation($color)// 从一个颜色中获取亮度（lightness）值；
// lightness($color)// 通过改变一个颜色的色相值，创建一个新的颜色；$degrees的单位可以是deg（-360, 360）或%(-100, 100)
// adjust-hue($color,$degrees)
.test1color: adjust-hue($color,$degrees)// 通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
// lighten($color,$amount)
.test2color: lighten($color,$amount)// 通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
// darken($color,$amount)
.test3color: darken($color,$amount)// 通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
// saturate($color,$amount)
.test4color: saturate($color,$amount)// 通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
// desaturate($color,$amount)
.test5color: desaturate($color,$amount)// 将一个颜色变成灰色，相当于desaturate($color,100%);
// grayscale($color)
.test6color: grayscale($color)// 返回一个补充色，相当于adjust-hue($color,180deg);
// complement($color)
.test7color: complement($color)// 反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
// invert($color)
.test8color: invert($color)

css：

.test1 {color: #ad5714;
}.test2 {color: #db1926;
}.test3 {color: #7f0f16;
}.test4 {color: #b70a16;
}.test5 {color: #a31e26;
}.test6 {color: #616161;
}.test7 {color: #14ada3;
}.test8 {color: #52ebe1;
}/*# sourceMappingURL=style.css.map */

• Opacity颜色函数

sass：

// 获取颜色透明度值；
// alpha($color)
// opacity($color)// 使颜色更不透明；
// opacify($color, $amount)
// fade-in($color, $amount)
// 这两个函数是用来对已有颜色的透明度做一个加法运算，会让颜色更加不透明。其接受两个参数，第一个参数是原始颜色，第二个参数是你需要增加的透明度值，其取值范围主要是在 0~1 之间。当透明度值增加到大于 1 时，会以 1 计算，表示颜色不具有任何透明度。
.test1color: opacify(#a9d, 0.3)// 使颜色更加透明。
// transparentize($color, $amount)
// fade-out($color, $amount)
// transparentize() 和 fade-out() 函数所起作用刚好与 opacify() 和 fade-in() 函数相反，让颜色更加的透明。这两个函数会让透明值做减法运算，当计算出来的结果小于 0 时会以 0 计算，表示全透明。
.test2color: transparentize(#a9d, 0.7)

css：

.test1 {color: #aa99dd;
}.test2 {color: rgba(170, 153, 221, 0.3);
}/*# sourceMappingURL=style.css.map */

五、Introspection 函数

• type-of() 函数

type-of() 函数主要用来判断一个值是属于什么类型，其返回值有：
number 数值
string 字符串
bool 布尔
color 颜色
list 列表
map 图>> type-of(100)
"number"
>> type-of(100px)
"number"
>> type-of("asdf")
"string"
>> type-of(asdf)
"string"
>> type-of(true)
"bool"
>> type-of(false)
"bool"
>> type-of(#fff)
"color"
>> type-of(blue)
"color"
>> type-of(1 / 2 = 1)
"string"
>> type-of(1px 2px)
"list"

• unit() 函数

unit() 函数主要是用来获取一个值所使用的单位，碰到复杂的计算时，其能根据运算得到一个“多单位组合”的值，不过只充许乘、除运算：>> unit(100)
""
>> unit(100px)
"px"
>> unit(20%)
"%"
>> unit(1em)
"em"
>> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)
"px/em"
>> unit(10px * 2em / 3cm / 1rem)
"em/rem"但加、减碰到不同单位时，unit() 函数将会报错，除 px 与 cm、mm 运算之外：>> unit(1px + 1cm)
"px"
>> unit(1px - 1cm)
"px"
>> unit(1px + 1mm)
"px"
>> unit(10px * 2em - 3cm / 1rem)
SyntaxError: Incompatible units: 'cm' and 'px*em'.
>> unit(10px * 2em - 1px / 1rem)
SyntaxError: Incompatible units: '' and 'em'.
>> unit(1px - 1em)
SyntaxError: Incompatible units: 'em' and 'px'.
>> unit(1px - 1rem)
SyntaxError: Incompatible units: 'rem' and 'px'.
>> unit(1px - 1%)
SyntaxError: Incompatible units: '%' and 'px'.
>> unit(1cm + 1em)
SyntaxError: Incompatible units: 'em' and 'cm'.

• unitless() 函数

unitless() 函数相对来说简单明了些，只是用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false：>> unitless(100)
true
>> unitless(100px)
false
>> unitless(100em)
false
>> unitless(100%)
false
>> unitless(1 /2 )
true
>> unitless(1 /2 + 2 )
true
>> unitless(1px /2 + 2 )
false

• comparable() 函数

comparable() 函数主要是用来判断两个数是否可以进行“加，减”以及“合并”。如果可以返回的值为 true，如果不可以返回的值是 false：>> comparable(2px,1px)
true
>> comparable(2px,1%)
false
>> comparable(2px,1em)
false
>> comparable(2rem,1em)
false
>> comparable(2px,1cm)
true
>> comparable(2px,1mm)
true
>> comparable(2px,1rem)
false
>> comparable(2cm,1mm)
true

六、Miscellaneous函数

在这里把 Miscellaneous 函数称为三元条件函数，主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：if($condition,$if-true,$if-false)
上面表达式的意思是当 $condition 条件成立时，返回的值为 $if-true，否则返回的是 $if-false 值。>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px

七、Maps函数

sass：

// map的定义
$color: (default: #fff, primary: #22ae39)// 根据给定的键key，返回图map中相关的值。如果找不到，则不会输出css。
// map-get($map, $key)
.test1color: map-get($color, primary)// 将图map1和图map2合并成一个新的map。如果map1和map2中有同名的键，那么map2中的键会覆盖掉map1中的键
// map-merge($map1, $map2)// 从图map中删除一个键key（同时删除键对应的值）。如果删除的key并不存在于$map中，那么map-remove()函数返回的新map和以前的map一样。
// map-remove($map,$key)// 返回图map所有的键。
// map-keys($map)
@each $name in map-keys($color).test2-#{$name}color: map-get($color, $name)// 返回图map所有的值。
// map-values($map)
@each $name in map-values($color).test3-#{$name}color: $name// 根据给定的键key判断图map是否有对应的value值，如果有返回true，否则返回false。
// map-has-key($map, $key)
@if map-has-key($color, primary).test4color: map-get($color, primary)// 可以利用混合宏或函数传进来的参数创建map。
// keywords($args)
@mixin map($args...)@debug keywords($args)
@include map($dribble: #ea4c89, $facebook: #3b5998, $github: #171515, $google: #db4437, $twitter: #55acee)

css：

.test1 {color: #22ae39;
}.test2-default {color: #fff;
}.test2-primary {acolor: #22ae39;
}.test3-#fff {color: #fff;
}.test3-#22ae39 {color: #22ae39;
}.test4 {color: #22ae39;
}/*# sourceMappingURL=style.css.map */

八、自定义函数

@function 函数名(参数列表)函数体@return 函数的返回值