Sass - Function 指令

Sass - 函数指令（`@function`）

Sass 允许你使用 @function 指令定义自己的自定义函数。这些函数封装可重用逻辑、执行计算或操作 Sass 值（如颜色、字符串、数字、列表、映射），并返回一个单个值。它们对于创建更复杂和易于维护的样式表至关重要。

定义函数

使用 @function 定义函数，后跟函数名、括号 () 中的参数列表以及包含函数逻辑的块 {}。函数必须以 @return 指令结尾，指定要返回的值。

语法：

@function function-name($arg1, $arg2: default-value) {
  // SassScript logic using arguments
  $result: ...; // Perform calculations or manipulations

  @return $result; // Must return a value
}

关键点：

**命名：**函数名遵循与变量相同的规则（连字符和下划线可以互换使用）。良好的实践是使用前缀（例如 my-prefix-func-name）或命名空间（@use）来避免冲突。
**参数：**函数可以接受零个或多个参数。参数可以有默认值，使其成为可选的。
**返回值：**函数必须使用 @return 返回一个单个值。此值可以是任何 Sass 数据类型（数字、字符串、颜色、列表、映射、布尔值、null）。
**作用域：**函数内部定义的变量仅在该函数内部可见，除非显式声明为全局（使用 !global，通常不推荐）。

示例：计算宽高比填充

@use 'sass:math';

// 计算固定宽高比容器的百分比 padding-top/bottom
@function aspect-ratio-padding($width, $height) {
  @return math.div($height, $width) * 100%;
}

.aspect-ratio-16-9 {
  position: relative;
  height: 0;
  padding-bottom: aspect-ratio-padding(16, 9); // 例如，56.25%

  > * { // 直接子元素填充容器
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

使用函数

调用自定义函数的方式与内置 Sass 函数相同，使用函数名后跟包含所需参数的括号。

.element {
  // Call function and use its return value
  width: calculate-width(100px, 2);
  color: adjust-color($base-color, $lightness: 10%);
}

函数可以在允许使用 SassScript 表达式的任何地方使用，例如属性值、变量赋值或控制指令（@if、@each 等）内部。

函数与混合（Mixins）

理解函数（@function）与混合（@mixin）之间的区别非常重要：

函数（@function）：计算并返回一个单个值。它们用于计算、转换和产生可在 CSS 属性或其他 SassScript 表达式中使用的值的逻辑。
混合（@mixin）：定义可重用的样式块（CSS 声明）。它们使用 @include 包含，并直接生成 CSS 规则。它们不返回值，而是输出样式声明。

当你需要计算一个值时（例如，颜色、尺寸、字符串）使用函数。当你需要应用一组样式时使用混合。

内置模块

Sass 提供了强大的内置模块（如 sass:math、sass:color、sass:string、sass:list、sass:map），它们提供了许多有用的函数。在编写自己的自定义函数之前，应尽可能利用这些模块。

@use 'sass:color';

$adjusted-color: color.scale(blue, $lightness: -20%, $saturation: 15%);

.button {
  background-color: $adjusted-color;
}

请查阅官方 Sass 文档，了解内置模块和函数的完整列表：https://sass-lang.com/documentation/modules