函数 @function、@return

约 1025 字大约 3 分钟

2025-04-11

在 Sass 中，@function 和 @return 是用于创建自定义函数的核心指令。它们允许你封装复杂计算逻辑，生成动态值，并在样式中复用这些逻辑。以下是它们的详细介绍、用法和特性：

一、`@function` 和 `@return` 的核心作用

@function：定义自定义函数，接收参数并执行逻辑。
@return：从函数中返回计算结果（只能用于函数内部）。
主要用途：简化重复计算（如颜色转换、数学运算）、生成动态值、封装复杂逻辑。

二、基本语法

// 定义函数
@function function-name($param1, $param2: default-value) {
  // 逻辑处理
  @return $result; // 必须返回一个值
}

// 调用函数
selector {
  property: function-name(arg1, arg2);
}

三、关键特性与用法

1、参数与默认值

支持参数默认值：未传参时使用默认值。

示例：

@function calculate-width($columns, $total: 12) {
  @return percentage($columns / $total);
}

.sidebar {
  width: calculate-width(3); // 3/12 = 25%
}

2、返回值类型

可返回任意 Sass 数据类型：数字、字符串、颜色、列表、映射、布尔值等。

示例:

@function get-text-color($bg-color) {
  @if lightness($bg-color) > 50% {
    @return #000; // 返回颜色
  } @else {
    @return #fff;
  }
}

.box {
  color: get-text-color(#333); // 返回白色
}

3、函数内的逻辑控制

支持条件语句（@if、@else）和循环（@each、@for）：

@function sum($numbers) {
  $total: 0;
  @each $num in $numbers {
    $total: $total + $num;
  }
  @return $total;
}

.value {
  width: sum(10, 20, 30) + px; // 输出 60px
}

四、函数与混入（Mixin）的区别

特性	`@function`	`@mixin`
返回值	必须返回一个值（通过 `@return`）	不返回值，直接生成 CSS 代码块
用途	计算动态值	复用样式代码块
调用方式	通过 `function-name()` 调用	通过 `@include mixin-name` 调用
是否生成 CSS	否	是

五、实际应用场景

1、颜色计算

生成动态颜色变体：

@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

.button {
  background: tint(blue, 20%); // 混合20%白色的蓝色
}

2、响应式工具

生成动态间距工具类：

@function spacing($multiplier, $base: 8px) {
  @return $base * $multiplier;
}

.card {
  padding: spacing(2); // 16px
  margin: spacing(3); // 24px
}

3、数学运算

计算栅格系统宽度：

@function grid-width($col, $total: 12, $gutter: 20px) {
  @return calc(#{percentage($col / $total)} - #{$gutter});
}

.col-4 {
  width: grid-width(4); // calc(33.33333% - 20px)
}

六、高级技巧

1、剩余参数（可变参数）

使用 ... 接收任意数量参数：

@function sum($numbers...) {
  $sum: 0;
  @each $num in $numbers {
    $sum: $sum + $num;
  }
  @return $sum;
}

.total {
  value: sum(10, 20, 30); // 60
}

2、错误处理

使用 @error 抛出错误信息：

@function divide($a, $b) {
  @if $b == 0 {
    @error "除数不能为0";
  }
  @return $a / $b;
}

.result {
  width: divide(10, 0); // 编译时报错
}

3、递归调用

实现递归逻辑（如阶乘计算）：

@function factorial($n) {
  @if $n == 1 {
    @return 1;
  }
  @return $n * factorial($n - 1);
}

.value {
  width: factorial(5); // 120
}

七、注意事项

函数命名
- 使用连字符（如 calculate-width），避免与内置函数冲突。
- 函数名需唯一，不可重复定义。
作用域
- 函数需在调用前定义，或通过 @use/@forward 导入。
性能优化
- 避免在函数内进行复杂嵌套循环，影响编译速度。

八、最佳实践

封装高频计算逻辑： 如颜色转换、单位换算、数学公式。
保持函数单一职责： 一个函数只解决一个问题，提高复用性。

文档注释： 使用注释说明函数用途、参数和返回值：

/// 计算元素宽度
/// @param {number} $columns - 当前列数
/// @param {number} $total - 总列数（默认12）
/// @return {percentage} - 百分比宽度
@function calculate-width($columns, $total: 12) {
  @return percentage($columns / $total);
}

九、总结

核心能力	说明
动态计算	处理颜色、尺寸、数学运算等逻辑，返回动态值
代码复用	封装重复计算逻辑，减少代码冗余
灵活性	支持条件、循环、递归，兼容所有 Sass 数据类型
适用场景	工具类生成、主题系统、响应式设计、复杂动画逻辑

通过合理使用 @function 和 @return，可以显著提升 Sass 代码的可维护性和灵活性，尤其适合需要动态计算和复用的场景。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24