考虑到 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%; }
来源: http://www.jianshu.com/p/7f879ce0cbb9