考虑到sass自定义函数用到地方比较多,并且后续需要单独拿出来和Mixin、extend进行比较,所以将原本属于上一篇《Sass函数功能汇总》的这部分知识,在这里另开篇幅了。
【Sass函数功能汇总】:https://www.jianshu.com/p/ef2ca6fbf944
1. 创建和使用自定义函数
Sass和其他脚本语言有类似之处,可以利用变量来构建自己的函数,这使Sass可以像写JavaScript那样拥有自己的逻辑。下面是Sass自定义函数的基本结构:
@function function-name($args) {
@return value-to-be-returned;
}
body{
font-size: function-name($args);
}
- 创建自定义函数需要两个Sass指令, @function和 @return。前者创建函数,后者表明了函数将返回的值
- function-name代表函数名,在Sass中function-name和 function_name是相同的函数,所以可使用破折号或下划线调用函数,无论命名时使用的是哪个。
- 传递到函数中的参数$args是可选的,通常会使用传递过去的参数进行运算,也可能是一些所有函数都可以访问的全局变量。
//SCSS
@function column-width($col, $total) {
@return percentage($col/$total);
}
.col-3 {
width: column-width(3, 8);
}
.col-5 {
width: column-width(5, 8);
}
//CSS
.col-3 { width: 37.5%; }
.col-5 { width: 62.5%; }
2. 关键字参数
传参的时候有时候会不知道每个参数是什么意思,参数之间是一个什么样的顺序。为了解决这个问题,Sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参,参数顺序就不必再在乎了,只需要保证没有漏掉参数即可:
//SCSS
@function column-width($col, $total) {
@return percentage($col/$total);
}
.col-3 {
width: column-width($col:3, $total:8);
}
.col-5 {
width: column-width($total:5,$col:8);
}
//CSS
.col-3 { width: 37.5%; }
.col-5 { width: 160%; }
3. 默认参数
为了在使用函数是不必传入所有的参数,我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式,默认值可以是任何有效的css属性值,甚至是其他参数的引用。
//SCSS
@function column-width($col:3, $total:8) {
@return percentage($col/$total);
}
.col-3 {
width: column-width($col:2, $total:4);
}
.col-5 {
width: column-width();
}
//CSS
.col-3 { width: 50%; }
.col-5 { width: 37.5%; }