Question

Sass 支持自定义函数，并能在任何值或脚本上下文中使用。例如

$grid-width: 40px;
    $gutter-width: 10px;

@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

就变成了:

#sidebar {
  width: 240px; }

正如你看到的，函数可以访问任何全局定义的变量，以及接受参数，就像一个混入（mixin）。函数可以包含语句，并且你必须调用@return来设置函数的返回值。

与混入（mixin）一样，你可以使用关键字参数来调用Sass定义的函数。在上面的例子中，我们可以这样调用函数：

#sidebar { width: grid-width($n: 5); }

建议您在函数前加上前缀，以避免命名冲突，其他人阅读样式表的时候也会知道它们不是 Sass 或者 CSS 的自带功能。例如，如果您在ACME公司工作，你可以给上面的函数取名为-acme-grid-width。

用户自定义的函数也支持可变参数，方式和混入（mixin）是相同的。

由于历史的原因，函数名（和所有其他Sass标识符）中连字符和下划线可以互换。例如，如果你定义了一个名为grid-width的函数，你可以通过grid_width调用它，反之亦然。