| SASS详解之函数(function) | 您所在的位置：网站首页 › sass怎么使用js方法 › 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)好用。 |
| CopyRight 2018-2019 实验室设备网 版权所有 |