Sass自备了一系列的函数功能，大部分能通过普通的css语句直接调用。这篇文章会详细介绍Sass的字符串函数、数字函数、列表函数、Introspection函数、三元函数等等，尽量将Sass函数方面的知识汇总
【Sass自定义函数】：https://www.jianshu.com/p/7f879ce0cbb9
1. 字符串函数
unquote（$string）：删除字符串中的引号；
quote（$string）：给字符串添加引号；
To-upper-case（$string）：将字符串小写字母转换为大写字母
To-lower-case（$string）：将字符串大写字母转换为小写字母
（1） unquote（$string）
unquote函数主要功能是删除字符串中的引号：
不管是双引号还是单引号包裹的字符串，引号皆被去掉；
只能删除字符串最前边和最后边的引号，没法去掉中间的引号；
如果字符串没有带引号，则返回原字符串；
若引号中，有半个不成对的引号。
//SCSS.demo1 { content: unquote('Hello Sass') ; }
.demo2 { content: unquote("Hello Sass"); }
.demo3 { content: unquote("Hello' Sass"); }
.demo4 { content: unquote("'Hello Sass'"); }
.demo5 { content: unquote('"Hello Sass"'); }
.demo6 { content: unquote(Hello Sass);}//CSS.demo1 { content: Hello Sass; }
.demo2 { content: Hello Sass; }
.demo3 { content: Hello' Sass; }
.demo4 { content: 'Hello Sass'; }
.demo5 { content: "Hello Sass"; }
.demo6 { content: Hello Sass; }（2） quote（$string）
quote函数主要功能是给字符串添加引号：
若字符串本身带有引号，就不添加；
若字符串带有单引号，则跟换为双引号；
若双引号中有单引号，则不变，单引号不受影响；
若字符串中间有空格或者半块的单引号、双引号时，需要用单引号或双引号括起，不然编译会报错;
碰到特殊符号，比如： !、?、> 等，除中折号 - 和下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错：
//SCSS.demo1 { content: quote('Hello Sass') ; }
.demo2 { content: quote("Hello Sass"); }
.demo3 { content: quote("Hello' Sass"); }
.demo4 { content: quote("'Hello Sass'"); }
.demo5 { content: quote('"Hello Sass"'); }
.demo6 { content: quote(HelloSass);}//CSS.demo1 { content: "Hello Sass"; }
.demo2 { content: "Hello Sass"; }
.demo3 { content: "Hello' Sass"; }
.demo4 { content: "'Hello Sass'"; }
.demo5 { content: '"Hello Sass"'; }
.demo6 { content: "HelloSass"; }2. 数字函数
percentage($value)：将不带单位的数转换成百分比值；
round($value)：将数值四舍五入，转换成一个最接近的整数；
ceil($value)：向上取整；
floor($value)：向下取整；
abs($value)：取数的绝对值；
min($numbers…)：找出几个数值之间的最小值；
max($numbers…)：找出几个数值之间的最大值；
random(): 获取随机数
Sass的数字函数和JavaScript的Math对象方法基本相似：
//SCSS.demo1 {
width : percentage(.2); //转换成百分比值
height: percentage(2px / 10px);
margin: percentage(2em / 10em);
}
.demo2 {
width: round(12.3px); //四舍五入，两边单位不统一会报错
height: round(2px / 3px);
margin: round(2.2%);
}
.demo3 {
width: ceil(2.3px); //向上取整
height: ceil(2px / 3px);
margin: ceil(2.8%);
}
.demo4 {
width: floor(2.3px); //向下取整
height: floor(2px / 3px);
margin: floor(2.8%);
}
.demo5{
width: abs(2.3px); //绝对值
height: min(1,2,1%,3,300%); //找出最小值
margin: max(1px,5px); //找出最大值
padding:random(); //随机数}//CSS.demo1 {
width: 20%;
height: 20%;
margin: 20%; }
.demo2 {
width: 12px;
height: 1;
margin: 2%; }
.demo3 {
width: 3px;
height: 1;
margin: 3%; }
.demo4 {
width: 2px;
height: 0;
margin: 2%; }
.demo5 {
width: 2.3px;
height: 1%;
margin: 5px;
padding: 0.4669285352; }3. 列表函数
length($list)：返回一个列表的长度值;
nth($list, $n)：返回一个列表中指定的某个标签值;
join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
append($list1, $val, [$separator])：将某个值放在列表的最后；
zip($lists…)：将几个列表结合成一个多维的列表；
index($list, $value)：返回一个值在列表中的位置值。
//SCSS.demo1 {
width : length(10px); //返回列表清单中有多少个值，空格隔开，不能使用逗号。
height: length(border 1px solid) //同一个列表里,可以是不同类型、不同单位的值}
.demo2 {
width: nth((Helvetica,Arial,sans-serif),2); //指定列表中某个位置的值，1是指列表中的第一个标签值,以此类推。
height: nth((1px solid red) border-top green,1);
}
.demo3 {
margin: join((10px 20px),(30px 40px)); //将两个列表连接合并成一个列表,不同列表之间用逗号隔开。
padding: append((10px,20px,20px),30px); //将某个值插入到列表中，并且处于最末位
border: zip(1px 2px 3px,solid dashed dotted) ; //多个列表值转成一个多维的列表,每个单一的列表个数值必须是相同}
.demo4 {
width: index(1px solid red, 1px); //返回对应的值在列表中所处的位置,第一个值就是1,以此类推。
height: index(1px solid red, yellow) //如果指定的值不在列表中，那么返回的值将是false著作权归作者所有。}//CSS.demo1 {
width: 1;
height: 3;
}
.demo2 {
width: Arial;
height: 1px solid red;
}
.demo3 {
margin: 10px 20px 30px 40px;
padding: 10px, 20px, 20px, 30px;
border: 1px solid, 2px dashed, 3px dotted;
}
.demo4 {
width: 1;
}4. Introspection函数
type-of($value)：返回一个值的类型;
unit($number)：返回一个值的单位;
unitless($number)：判断一个值是否带有单位;
comparable($number-1, $number-2)：判断两个值是否可以做加、* 减和合并.
//SCSS.demo1 { content:type-of(100); //判断一个值是属于什么类型
content:type-of(100px);
content:type-of(asdf);
content: type-of(blue);
}
.demo2 { content: unit(10px * 3em); //获取一个值所使用的单位
content: unit(10px * 2em / 3cm / 1rem);
}
.demo3 { content: unitless(100px); //判断一个值是否带有单位
content: unitless(1 /2 + 2 );
}
.demo3 { content: comparable(2px,1px); //断两个数是否可以进行加，减以及合并
content: comparable(2px,1em);
}//CSS.demo1 {
content: number;
content: number;
content: string;
content: color;
}
.demo2 {
content: "em*px";
content: "em/rem";
}
.demo3 {
content: false;
content: true;
}
.demo3 {
content: true;
content: false;
}5. 三元条件函数
if($condition,$if-true,$if-false);
判断$condition，如果条件成立，则返回$if-true的结果，如果条件不成立，则返回$if-false的结果。
//SCSS.demo1{width:if(true,8em,20em)}
.demo2{height:if(false,8em,20em)}//CSS.demo1 { width: 8em;}
.demo2 {height: 20em;}6.Maps的函数
map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值；
map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
map-keys($map)：返回 map 中所有的 key。
map-values($map)：返回 map 中所有的 value。
map-merge($map1,$map2)：将两个 map 合并成一个新的 map。
map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。
keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。
Sass中map的形式如下：
用 $ 加上命名空间来声明 map，后面紧接是一个小括号 ()，将数据以 key:value 的形式赋予，key 和 value 是成对出现。
$map: ( $key1: value1, $key2: value2, $key3: value3 )
对应的一些例子：
//SCSS$colors: (//$map
redColor: #FF2C60, // $key:value
greenColor:#168009,
blueColor:#7BA5FF);
@if map-has-key($colors, meat) { //当 $map 中有这个 $key，则函数返回 true，否则返回 false。
div {
color: map-get($colors, redColor); //根据 $key 参数，返回 $key 在 $map 中对应的 value 值。
color: map-get($colors, yellowColor); //如果 $key 不存在 $map中，将返回 null 值,并且不会把css编译出来。
}
} @else {
div {
color: green
}
}
.btn-#{nth(map-keys($colors),1)} { //函数将会返回 $map 中的所有 key,并通过nth（）获取某值
color: nth(map-values($colors), 2); //函数将会返回 $map 中的所有 value,并通过nth（）获取某值
}$div1: (
text: #f36,
link: #f35,
border: #384);$div2: (
width:300px,
height:100px,
z-index:3
);$newMap: map-merge($div1, $div2); //map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并，然后得到一个新的 $map。
div {
@each $x, $y in $newMap { #{$x}: #{$y};
}
}$newMap: map-remove($div1, link); // 用来删除当前 $map 中的某一个 $key，从而得到一个新的 map。其返回的值还是一个 map。
div {
@each $x, $y in $newMap { #{$x}: #{$y};
}
}//CSSdiv {
color: green;
}
.btn-redColor {
color: #168009;}
div {
text: #f36;
link: #f35;
border: #384;
width: 300px;
height: 100px;
z-index: 3;
}
div {
text: #f36;
border: #384;}7.颜色函数
rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
red($color)：从一个颜色中获取其中红色值；
green($color)：从一个颜色中获取其中绿色值；
blue($color)：从一个颜色中获取其中蓝色值；
mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。
//SCSS.demo1 {
color: rgb(100, 148, 210); //根据红、绿、蓝三个值创建一个颜色,输入的是三个0-255之间的数字值
background-color: rgba(255, 43, 75, 0.8); //根据红、绿、蓝和透明度值创建一个颜色}
.demo2 {
content: red(#f36); //从一个颜色中获取其红色值
@if red(#f36) > 50 { //当颜色的红色值大于50使用白色，否则使用黑色
color: #fff;
} @else{
color: #000;
}
}
.demo3 {
color:mix(#f00, #00f); //把两种颜色按照一定的比例混合在一起
color: mix(#f00, #00f, 25%)}//CSS.demo1 {
color: #6494d2;
background-color: rgba(255, 43, 75, 0.8);
}
.demo2 {
content: 255;
color: #fff;}
.demo3 {
color: purple;
color: #4000bf;}8.自定义函数
考虑到Sass自定义函数用到地方比较多，并且后续需要单独拿出来和Mixin、extend进行比较，所以另开篇幅了
【Sass自定义函数】：https://www.jianshu.com/p/7f879ce0cbb9
作者：四小七
链接：https://www.jianshu.com/p/ef2ca6fbf944
随时随地看视频
