sass 自定义函数
作者 jcLee95
已入驻☞阿里云博客
邮箱 ：291148484@163.com
本文地址：
- 阿里云：https://developer.aliyun.com/article/
- CSDN：https://blog.csdn.net/qq_28550263/article/details/123350343
相关文章推荐：
目 录
2. Sass函数 与 Sass混入（mixin）有什么不同？
1. Sass函数的概念
函数允许您对SassScript值定义复杂的操作，您可以在整个样式表中重用这些操作。它们使得以可读的方式抽象出通用的公式和行为变得容易。
2. Sass函数 与 Sass混入（mixin）有什么不同？
Sass函数（function） 与 Sass混入（mixin）是一回事吗？虽然两者及其类似，但是当然不是一回事！
从使用形式上看，Sass函数是使用@function定义的，而Sass混入（mixin）是使用@mixin定义并使用@include包含的。
从目的上看，混入的目的是复用某一个Sass样式块。因此对于使用一个一经定义好的混入，我们不认为这是调用，而称之为包含。引入函数更多的是为了让一些复杂的计算和操作过程能够模块化，从而达到复用的目的。
3. Sass函数 的用法
3.1 函数的定义
3.1.1 函数定义的格式
函数是使用@function 指令 定义的。其格式为：
@function <name>(<arguments...>) { ... }.
与JavaScript中的函数一样，Sass函数也拥有返回值，返回值用@retrurn指令来指示，@return指令只允许出现在@function正文中。每个都@function 必须以 @return，这是和 JavaScript 中的函数不一样的。
例如：
@use "sass:string"; @function str-insert($string, $insert, $index) { // 如果不需要的话，避免制造新的字符串。 @if string.length($string) == 0 { @return $insert; } $before: string.slice($string, 0, $index); $after: string.slice($string, $index); @return $before + $insert + $after; }
注：@use指令用于从其他 Sass 样式表中加载mixins、函数和变量，并将来自多个样式表的 CSS 组合在一起。加载的样式表@use称为“模块”。Sass 还提供了很多有用的内置模块，这里的sass:string就是内置模块，这部分可以参考博文Sass 内置函数总结。
又如：
// bootstrap5 @function add($value1, $value2, $return-calc: true) { // 如果第一个值为 null，则加的结果为第二个值 @if $value1 == null { @return $value2; } // 如果第二个值为 null，则加的结果为第一个值 @if $value2 == null { @return $value1; } // 如果两个值都是数字，并且是可进行比较的（同一单位类型），则返回相加结果 @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { @return $value1 + $value2; } @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2); }
再如：
// 返回不透明颜色 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080 @function opaque($background, $foreground) { @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100); }
这段代码中，mix(color1, color2, weight)是Sass内置的函数，用于把两种颜色混合起来，前两个参数都是颜色，最后一个是第二个颜色的比重。
3.1.2 函数名标识符
与所有 Sass 标识符一样，函数名称将连字符和下划线视为相同。这意味着 add-many 与 add_many 都指的是相同的功能。这是 Sass 早期的历史遗留问题，当时它只允许在标识符名称中使用下划线。一旦 Sass 添加了对连字符的支持以匹配CSS的语法，这两者就等同于使迁移更容易。
3.2 函数的参数
参数允许在每次调用函数时自定义函数的行为。参数在@function函数名称之后的规则中指定为用括号括起来的变量名称列表。该函数必须以SassScript 表达式的形式使用相同数量的参数调用。这些表达式的值在函数体中作为相应的变量可用。默认值可以是任何 SassScript 表达式，它们甚至可以引用更早的参数！
3.2.1 可选参数
虽然函数声明的每个参数都必须在包含该函数时传递，但是仍然可以通过定义一个默认值来使参数成为可选参数，这和Sass混入（Mixin）中的可选参数是类似的。如果该参数未传递，则将使用该默认值。默认值使用与变量声明相同的语法：变量名，后跟一个冒号和一个SassScript 表达式。这使得定义灵活的函数 API 变得容易，这些 API 可以以简单或复杂的方式使用。
@function invert($color, $amount: 100%) { $inverse: change-color($color, $hue: hue($color) + 180); @return mix($inverse, $color, $amount); } $primary-color: #036; .header { background-color: invert($primary-color, 80%); }
3.2.2 按名称传递参数
调用函数时，除了按参数列表中的位置传递参数（位置参数）外，还可以按名称传递参数。这对于具有多个可选参数的函数或带有布尔参数的函数特别有用，这些参数的含义在没有名称的情况下并不明显。关键字参数使用与变量声明和可选参数相同的语法。
例如：
$my-color: #007fd3; .box { color: scale-color($my-color, $lightness: +40%); // 注：scale-color是Sass内置函数 }
3.2.3 任意参数
Sass函数和Sass混入一样，也可以使用任意参数，就像JavaScript中的函数接受一个参数列表一样。函数能够接受任意数量的参数很有用。如果@function声明中的最后一个参数以 结尾…，则该函数的所有额外参数都作为列表传递给该参数。此参数称为参数列表。
例如：
@function add_many($numbers...) { $sum: 0; @each $number in $numbers { $sum: $sum + $number; } @return $sum; } .my-box { width: add_many(10px, 20px, 30px, 40px, 50px, 60px); // width: 210px; }
编译成CSS后：
.my-box { width: 210px; } /*# sourceMappingURL=test.css.map */
