考虑到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%; }
作者:四小七
链接:https://www.jianshu.com/p/7f879ce0cbb9
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦