Sass 支持自定义函数,并能在任何值或脚本上下文中使用。例如
1 | $grid-width: 40px; |
就变成了:
1 | #sidebar { |
正如你看到的,函数可以访问任何全局定义的变量,以及接受参数,就像一个混入(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, 或者是整个类的样式, 可以接收外来样式的嵌入