函数指令 (Function Directives)

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

1
2
3
4
5
6
7
8
$grid-width: 40px;
$gutter-width: 10px;

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

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

就变成了:

1
2
#sidebar {
width: 240px; }

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

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

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

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

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

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

mixins 和 function

  • function只能返回值
  • mixins可以返回key/value, 或者是整个类的样式, 可以接收外来样式的嵌入
-------------本文结束感谢您的阅读-------------

本文标题:函数指令 (Function Directives)

文章作者:yangpu

发布时间:2019年06月05日 - 15:30

最后更新:2019年06月05日 - 15:30

原始链接:https://mongofeng.github.io/2019/06/05/Function-Directives/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。