SASS详解之函数(function)

　　SASS和其他语言脚本有类似之处。可以利用变量来构建自己的函数，这也是SASS迷人之处之一，原来写CSS还可以像写JavaScript那样拥有自己的逻辑。

　　自定义函数

　　SASS代码

$oneWidth: 10px;$twoWidth: 40px;@function widthFn($n) {  @return $n * $twoWidth + ($n - 1) * $oneWidth;}.leng { width: widthFn(5);}

　　编译后CSS代码

.leng {  width: 240px;}

　　通过上面可以看出，SASS中的函数可以使用全局变量，还可以接受像混合(mixin)一样的参数。函数可以有多个语句组成，但是必须设定返回值(return)。但是混合(mixin)就可以不用设置返回值即可操作。函数(function)传入的值也可以带有变量，如下

　　SASS代码

$oneWidth: 10px;$twoWidth: 40px;@function widthFn($n) {  @return $n * $twoWidth + ($n - 1) * $oneWidth;}.leng { width: widthFn($n : 5);}

　　编译后CSS代码

.leng {  width: 240px;}

 　　

　　字符串函数

　　字符串函数顾名思意是用来处理字符串的函数。Sass的字符串函数主要包括两个函数：unquote($string)——删除字符串中的引号和quote($string)——给字符串添加引号。

　　unquote()函数

　　unquote()函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。简单的使用终端来测试这个函数的运行结果。unquote()函数只能删除字符串最前和最后的成对引号(双引号或单引号)，而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。小例子如下

　　SASS代码

.test1 {    content:  unquote('梦龙小站!') ;}.test2 {    content: unquote("'梦龙小站!");}.test3 {    content: unquote("I'm 梦龙小站!");}.test4 {    content: unquote("'梦龙小站!'");}.test5 {    content: unquote('"梦龙小站!"');}.test6 {/*没有引号不能加中文，不然会报错*/    content: unquote(menglong);}

　　编译后CSS代码

.test1 {  content: 梦龙小站!;}.test2 {  content: '梦龙小站!;}.test3 {  content: I'm 梦龙小站!;}.test4 {  content: '梦龙小站!';}.test5 {  content: "梦龙小站!";}.test6 {  /*没有引号不能加中文，不然会报错*/  content: menglong;}

　　quote()函数

　　quote()函数刚好与unquote()函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号""。使用quote()函数增加只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。quote()碰到特殊符号，比如说!、?、>等，除中折号-和下划线_都需要使用双引号括起，否则编译器在进行编译的时候同样会报错。小例子如下

　　SASS代码

.test1 {    content:  quote('梦龙小站!');}.test2 {    content: quote("梦龙小站!");}.test3 {    content: quote(ImMengLong);    /*下面是错误写法content: quote(Im Meng Long);        content: quote(梦龙小站!);        content: quote("梦龙小站!);    */}.test4 {    content: quote(' ');}

　　编译后CSS代码

.test1 {  content: "梦龙小站!";}.test2 {  content: "梦龙小站!";}.test3 {  content: "ImMengLong";}.test4 {  content: " ";}

　　数字函数

　　Sass中的数字函数主要是对数字的一些功能。主要有percentage($value)、round($value)、ceil($value)、floor($value)、abs($value)、min($numbers…)和max($numbers…)。下面是用小例子来对他们进行说明。

　　percentage()

　　percentage()函数主要是将一个不带单位的数字转换成百分比形式，如果您转换的值是一个带有单位的值，那么在编译的时候会报错误信息。

　　SASS代码

/*错误写法，不能带单位percentage(2px / 10px)*/div {width:percentage(.2);}a {width:percentage(20);}span {width:percentage(2/3);}

　　编译后CSS代码

div {  width: 20%;}a {  width: 2000%;}span {  width: 66.66667%;}

　　round()函数

　　round()函数将一个数四舍五入为一个最接近的整数，在round()函数中可以携带单位的任何数值。

　　SASS代码

.meng1 {    width:round(.2);}.meng2 {    width:round(12.3);}.meng3 {    width:round(12.5);}.meng4 {    width:round(1.49999);}.meng5 {    width:round(2.2%);}.meng6 {    width:round(20%);}.meng7 {    width:round(3.9em);}.meng8 {    width:round(2.3px);}.meng9 {    width:round(2px / 3px)}.meng10 {    width:round(1px / 3px)}.meng11 {    width:round(3px / 2px)}/*简便写法，应用了@for*/$val : .2 12.3 12.5 1.49999 2.2% 20% 3.9em 2.3px 2px/3px 1px/3px 3px/2px;@for $i from 1 to 12 {    .long#{$i} {        width:round(nth($val, $i));    }}

　　编译后CSS代码

.meng1 {  width: 0;}.meng2 {  width: 12;}.meng3 {  width: 13;}.meng4 {  width: 1;}.meng5 {  width: 2%;}.meng6 {  width: 20%;}.meng7 {  width: 4em;}.meng8 {  width: 2px;}.meng9 {  width: 1;}.meng10 {  width: 0;}.meng11 {  width: 2;}/*简便写法，应用了@for*/.long1 {  width: 0;}.long2 {  width: 12;}.long3 {  width: 13;}.long4 {  width: 1;}.long5 {  width: 2%;}.long6 {  width: 20%;}.long7 {  width: 4em;}.long8 {  width: 2px;}.long9 {  width: 1;}.long10 {  width: 0;}.long11 {  width: 2;}

　　ceil()函数

　　ceil()函数将一个数转换成最接近于自己的整数，会将一个大于自身的任何小数转换成大于本身1的整数。也就是只做入，不做舍的计算。也就是向上取整。

　　SASS代码

.meng1 {    width:ceil(.2);}.meng2 {    width:ceil(12.3);}.meng3 {    width:ceil(12.5);}.meng4 {    width:ceil(1.49999);}.meng5 {    width:ceil(2.2%);}.meng6 {    width:ceil(20%);}.meng7 {    width:ceil(3.9em);}.meng8 {    width:ceil(2.3px);}.meng9 {    width:ceil(2px / 3px)}.meng10 {    width:ceil(1px / 3px)}.meng11 {    width:ceil(3px / 2px)}/*简便写法，应用了@for*/$val : .2 12.3 12.5 12.7 1.49999 2.2% 20% 3.9em 2.3px 2px/3px 1px/3px 3px/2px;@for $i from 1 to 13 {    .long#{$i} {        width:ceil(nth($val, $i));    }}

　　编译后CSS代码

.meng1 {  width: 1;}.meng2 {  width: 13;}.meng3 {  width: 13;}.meng4 {  width: 2;}.meng5 {  width: 3%;}.meng6 {  width: 20%;}.meng7 {  width: 4em;}.meng8 {  width: 3px;}.meng9 {  width: 1;}.meng10 {  width: 1;}.meng11 {  width: 2;}/*简便写法，应用了@for*/.long1 {  width: 1;}.long2 {  width: 13;}.long3 {  width: 13;}.long4 {  width: 13;}.long5 {  width: 2;}.long6 {  width: 3%;}.long7 {  width: 20%;}.long8 {  width: 4em;}.long9 {  width: 3px;}.long10 {  width: 1;}.long11 {  width: 1;}.long12 {  width: 2;}

　　floor()函数

　　floor()函数刚好与ceil()函数功能相反，其主要将一个数去除其小数部分，并且不做任何的进位。也就是只做舍，不做入的计算。也就是向下取整。

　　SASS代码

.meng1 {width:floor(.2);}.meng2 {width:floor(12.3);}.meng3 {width:floor(12.5);}.meng4 {width:floor(1.49999);}.meng5 {width:floor(2.2%);}.meng6 {width:floor(20%);}.meng7 {width:floor(3.9em);}.meng8 {width:floor(2.3px);}.meng9 {width:floor(2px / 3px)}.meng10 {width:floor(1px / 3px)}.meng11 {width:floor(3px / 2px)}/*简便写法，应用了@for*/$val : .2 12.3 12.5 12.7 1.49999 2.2% 20% 3.9em 2.3px 2px/3px 1px/3px 3px/2px;@for $i from 1 to 13 {.long#{$i} {width:floor(nth($val, $i));}}

　　编译后CSS代码

.meng1 {  width: 0;}.meng2 {  width: 12;}.meng3 {  width: 12;}.meng4 {  width: 1;}.meng5 {  width: 2%;}.meng6 {  width: 20%;}.meng7 {  width: 3em;}.meng8 {  width: 2px;}.meng9 {  width: 0;}.meng10 {  width: 0;}.meng11 {  width: 1;}/*简便写法，应用了@for*/.long1 {  width: 0;}.long2 {  width: 12;}.long3 {  width: 12;}.long4 {  width: 12;}.long5 {  width: 1;}.long6 {  width: 2%;}.long7 {  width: 20%;}.long8 {  width: 3em;}.long9 {  width: 2px;}.long10 {  width: 0;}.long11 {  width: 0;}.long12 {  width: 1;}

　　abs()函数

　　abs()函数会返回一个数的绝对值。

　　SASS代码

.meng1 {width:abs(.2);}.meng2 {width:abs(-0.2);}.meng3 {width:abs(12.5);}.meng4 {width:abs(-1.49999);}.meng5 {width:abs(-2.2%);}.meng6 {width:abs(20%);}.meng7 {width:abs(-3.9em);}.meng8 {width:abs(2.3px);}.meng9 {width:abs(-2px / 3px)}.meng10 {width:abs(-1px / 3px)}.meng11 {width:abs(3px / -2px)}/*简便写法，应用了@for*/$val : .2 -12.3 -12.5 12.7 -1.49999 -2.2% 20% -3.9em 2.3px -2px/3px -1px/3px 3px/-2px;@for $i from 1 to 13 {.long#{$i} {width:abs(nth($val, $i));}}

　　编译后CSS代码

.meng1 {  width: 0.2;}.meng2 {  width: 0.2;}.meng3 {  width: 12.5;}.meng4 {  width: 1.49999;}.meng5 {  width: 2.2%;}.meng6 {  width: 20%;}.meng7 {  width: 3.9em;}.meng8 {  width: 2.3px;}.meng9 {  width: 0.66667;}.meng10 {  width: 0.33333;}.meng11 {  width: 1.5;}/*简便写法，应用了@for*/.long1 {  width: 0.2;}.long2 {  width: 12.3;}.long3 {  width: 12.5;}.long4 {  width: 12.7;}.long5 {  width: 1.49999;}.long6 {  width: 2.2%;}.long7 {  width: 20%;}.long8 {  width: 3.9em;}.long9 {  width: 2.3px;}.long10 {  width: 0.66667;}.long11 {  width: 0.33333;}.long12 {  width: 1.5;}

　　min()函数

　　min()函数功能主要是在多个数之中找到最小的一个，这个函数可以设置任意多个参数。不过在min()函数中同时出现两种不同类型的单位。

　　SASS代码

.meng1 {width:min(0.2,-12.3,-12.5,12.7);}.meng2 {width:min(12.5,12.7,-1.49999,-2.2%,20%);}.meng3 {width:min(-12.3,12.7,-1.49999,-2.2%,20%,-3.9,2.3,-2/3,-1/3,3/-2);}

　　编译后CSS代码

.meng1 {  width: -12.5;}.meng2 {  width: -2.2%;}.meng3 {  width: -12.3;}

　　max()函数

　　max()函数和min()函数一样，不同的是，max()函数用来获取一系列数中的最大那个值。在max()函数中有不同单位，将会报错。

　　SASS代码

.meng1 {width:max(0.2,-12.3,-12.5,12.7);}.meng2 {width:max(12.5,12.7,-1.49999,-2.2%,20%);}.meng3 {width:max(-12.3,12.7,-1.49999,-2.2%,20%,60,-3.9,2.3,-2/3,-1/3,3/-2);}

　　编译后CSS代码

.meng1 {  width: 12.7;}.meng2 {  width: 20%;}.meng3 {  width: 60;}

　　List函数

　　列表函数主要包括一些对列表参数的函数使用，主要包括：length($list)、nth($list, $n)、join($list1, $list2, [$separator])、append($list1, $val, [$separator])、zip($lists…)和index($list, $value)。列表函数中的每个函数都有其独特的作用与功能，接下来我们通过命令终端向大家展示每个列表函数的功能与使用。下面是用小例子来对他们进行说明。

　　length()函数

　　length()函数主要用来返回一个列表中有几个值，简单点说就是返回列表清单中有多少个值。length()函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会把错。

　　SASS代码

$len1 : 100px;$len2 : 100px 3em (border 1px solid red) 30% 0.2;$len3 : arial verdana sans-serif;.meng1 {width:length($len1);}.meng2 {width:length($len2);}.meng3 {width:length($len3);}

　　编译后CSS代码

.meng1 {  width: 1;}.meng2 {  width: 5;}.meng3 {  width: 3;}

　　nth()函数

　　nth()函数用来指定列表中某个位置的值。不过在Sass中，nth()函数和其他语言不同，1是指列表中的第一个标签值，2是指列给中的第二个标签值，依此类推。在nth($list,$n)函数中的$n必须是大于0的整数。

　　SASS代码

　　编译后CSS代码

　　SASS中的函数(function)可以算是SASS中的点睛之笔，不过个人认为没有混合(mixin)和继承(extend)好用。