Sass 支持自定义函数,并能在任何属性值或 Sass script 中使用:
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
比如html5开发,rem与设计图单位的换算
@function rem($n) {
@return ($n/2/12);
}
.header{
height: rem(90rem); //height:3.75rem;
}
与 mixin 相同,也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句,需要调用 @return
输出结果。
自定义的函数也可以使用关键词参数,上面的例子还可以这样写: