Sass@函数规则

函数可以定义对SassScript值的复杂操作，这些操作可以在整个样式表中重复使用。它可以更容易地以某种可读的方式抽象出常见的公式和行为。可以使用@function at-rule 定义函数。

句法：

@function () {
 ... 
}

函数名可以是任何Sass标识符。它必须只包含通用语句，以及指示使用函数调用结果的值的@return at-rule。普通的 CSS 函数用于调用函数。

例子：

@function power($base, $expo)
  $result: 1
  @for $_ from 1 through $expo
    $result: $result * $base
  @return $result
  
.sidebar
  float: right
  margin-left: power(6, 2) * 2px

输出：

.sidebar {
  float: right;
  margin-left: 64px;
}

参数：参数允许在每次调用时更改函数的行为。参数在函数名后的@函数规则规定如图所示语法。它只是一个由圆括号或大括号括起来的变量名称列表。这些函数总是使用与SassScript表达式中相同数量的参数来调用。这些表达式的值在函数体内可用作相应的变量。

参数类型：

• 可选参数：
  例子：

  @function gfg($color, $amount: 100%) {
    $geeks: change-color($color, $hue: hue($color) + 180);
    @return mix($geeks, $color, $amount);
  }
    
  $primary-color: #ffffff;
  .header {
    background-color: gfg($primary-color, 80%);
  }
  

  输出：

  .header {
    background-color: white;
  }
  

• 任意参数：
  例子：

  $lengths: 50px, 30px, 100px;
  .gfg {
    width: max($lengths...);
  }
  

  输出：

  .gfg {
    width: 100px;
  }
  

• 关键字参数：
  例子：

  $geeks: green;
  .banner {
    background-color: $geeks;
    color: scale-color($geeks, $lightness: +40%);
  }
  

  输出：

  .banner {
    background-color: green;
    color: #1aff1a;
  }
  

@return： @return at-rule给出要用作被调用函数结果的值。只有在@函数规则有效，每@函数必须与@返回结束。当@return被调用时，它立即结束函数并返回结果。提前返回对于处理边缘情况非常有用。在无需将整个函数包装在@else块中即可使用有效算法的情况下，它也很有用。
例子：

@function add($numbers...) {
  $add: 0;
  @each $number in $numbers {
    $add: $add + $number;
  }
  @return $add;
}
  
.gfg {
  width: add(50, 30, 100);
}

输出：

.gfg {
  width: 180;
}