Sass之自定义函数

2023年1月5日 210次阅读 来源: 四小七

考虑到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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞