Sass中文文档

函数指令

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调用它,反之亦然。

上一篇: 下一篇: