sass笔记 - sass 自定义函数

jcLee95 的 CSDN 博客

CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343

邮箱 ：291148484@163.com

本文地址：https://blog.csdn.net/qq_28550263/article/details/123350343

相关文章推荐：

• Sass 内置函数总结
• sass 混入（mixin）

1. Sass函数的概念

2. Sass函数 与 Sass混入（mixin）有什么不同？

3. Sass函数 的用法

• 3.1 函数的定义
  • 3.1.1 函数定义的格式
  • 3.1.2 函数名标识符
• 3.2 函数的参数
  • 3.2.1 可选参数
  • 3.2.2 按名称传递参数
  • 3.2.3 任意参数

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 */