Sass函数规则

在 Sass 中，函数是可以重复使用的代码块，可以在样式表中的各个地方使用，并且可以接受参数，返回值也可以是变量、数值、布尔值等多种类型。函数可以帮助我们更加高效地书写 Sass 样式表。

声明函数

Sass 中的函数声明使用 @function 关键字，后面紧跟函数名和函数所接受的参数列表（如果有的话）。

@function function-name($arg1, $arg2, ...) {
  // 函数体
  @return value;
}

比如，我们可以定义一个函数，用于计算两个数的和：

@function add($num1, $num2){
  @return $num1 + $num2;
}

调用函数

在 Sass 样式表中，我们通过函数名和一组参数来调用函数。

div {
  width: add(10px, 20px);
}

在上面的示例中，add 函数被调用两次，分别传入了 10px 和 20px 作为参数，返回的结果分别是 30px。 div 元素的 width 被赋值为 30px。

返回值

函数可以使用 @return 关键字来指定函数的返回值。返回值可以是 Sass 中的任意类型，包括数字、字符串、颜色、布尔值、列表等等。

当函数被调用时，返回值将被作为函数的结果来使用。例如，我们可以定义一个函数来生成一个随机颜色：

@function random-color() {
  $red: random(0, 255);
  $green: random(0, 255);
  $blue: random(0, 255);
  @return rgb($red, $green, $blue);
}

div {
  background-color: random-color();
}

在上面的示例中，random-color 函数使用内置的 random 函数生成一个随机的 RGB 颜色，然后返回这个颜色值。 div 元素的 background-color 被设置为一个随机的颜色。

参数

函数可以接受零个或多个参数，并且每个参数都需要指定类型，例如字符串、数字、颜色等。在函数体内，我们可以通过参数名来访问这些参数。

下面是一个计算两个数字的平均值的函数：

@function average($num1, $num2) {
  @return ($num1 + $num2) / 2;
}

div {
  font-size: average(12px, 16px);
}

在上面的示例中，average 函数接受两个数字参数 $num1 和 $num2，返回它们的平均值。 div 元素的 font-size 被赋值为 14px。

默认值

在声明函数时，我们还可以为函数的参数设置默认值。当函数被调用时，如果没有为某个参数传递值，那么就会使用默认值。

下面是一个带有默认值的函数：

// 将颜色的透明度设为 0.5
@function opacity($color, $alpha: 0.5) {
  @return rgba($color, $alpha);
}

div {
  background-color: opacity(#ff0000);
}

在上面的示例中，opacity 函数接受两个参数：颜色 $color 和透明度 $alpha，默认值为 0.5。如果我们只传递了一个参数（颜色值），那么第二个参数就会使用默认值 0.5。 div 元素的 background-color 被设置为红色半透明。

继承函数

在 Sass 中，我们还可以继承其他函数的定义，以避免重复声明相同的函数。继承函数使用 @extend 关键字和函数名。

下面是一个示例：

@function add($num1, $num2){
  @return $num1 + $num2;
}

// 继承 add 函数
@function add-three($num1, $num2, $num3){
  @extend %add ($num1, $num2);
  @return $num3 + add($num1, $num2);
}

div {
  font-size: add-three(12px, 16px, 20px);
}

在上面的示例中，我们定义了一个 add 函数，接着定义了一个新的函数 add-three，这个函数继承了 add 函数的定义，并且在此基础上计算了三个数字的和。 div 元素的 font-size 被赋值为 48px。

总结

函数是 Sass 中非常有用的概念，它可以帮助我们更加高效地书写样式表，避免一些重复性的工作。在使用 Sass 函数时，我们需要遵循函数规则，并且了解其语法和用法，方能更好的使用它们。