Sass函数功能汇总

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};
  }
}

//CSS
div {
  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