SCSS 函数（Functions）

在 SCSS 中，函数（Functions）允许你创建可重用的代码块，执行计算并返回值。这使得样式更加灵活和动态。以下是 SCSS 函数的详细讲解和示例。

1. 定义函数

使用 @function 关键字定义一个函数，格式如下：

@function calculate-rem($size) {
  @return $size / 16 * 1rem;
}

在这个例子中，calculate-rem 函数接受一个参数 $size，返回转换后的值。

2. 使用函数

在 SCSS 中，你可以在样式中调用函数：

body {
  font-size: calculate-rem(32px); // 返回 2rem
}

3. 函数参数

函数可以接受多个参数，你可以为每个参数设置默认值：

@function calculate-area($width, $height: $width) {
  @return $width * $height; // 计算面积
}

.square {
  width: 100px;
  height: 100px;
  area: calculate-area(100px); // 计算 10000px²
}

.rectangle {
  width: 200px;
  height: 100px;
  area: calculate-area(200px, 100px); // 计算 20000px²
}

4. 内置函数

SCSS 还提供了许多内置函数，可以进行颜色处理、字符串操作、数学计算等。例如：

• 颜色函数：

  $primary-color: #3498db;
  $dark-color: darken($primary-color, 10%); // 变暗
  

• 数学函数：

  $width: 100px;
  $half-width: $width / 2; // 计算宽度的一半
  

5. 返回值

函数可以返回任意类型的值，包括数字、颜色、字符串等：

@function get-color($theme) {
  @if $theme == 'dark' {
    @return #333;
  } @else {
    @return #fff;
  }
}

body {
  background-color: get-color('dark'); // 返回 #333
}

6. 错误处理

你可以在函数中使用 @error 报告错误：

@function calculate-percentage($value, $total) {
  @if $total == 0 {
    @error "Total cannot be zero.";
  }
  @return ($value / $total) * 100;
}

总结

SCSS 的函数功能使得样式更加灵活和动态，可以执行复杂的计算和逻辑处理，减少重复代码，提升可维护性。