美文网首页
@function/@return 函数指令 (Function

@function/@return 函数指令 (Function

作者: 程序猿人王小贱 | 来源:发表于2017-07-03 14:29 被阅读0次

Sass 支持自定义函数,并能在任何属性值或 Sass script 中使用:

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

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

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

css
=============
#sidebar {
  width: 240px; }
  • @mixin 相同,也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句,需要调用 @return 输出结果。
  • 自定义的函数也可以使用关键词参数:
    #sidebar { width: grid-width($n: 5); }
  • 建议在自定义函数前添加前缀避免命名冲突,其他人阅读代码时也会知道这不是 Sass 或者 CSS 的自带功能。
  • 自定义函数与 mixin 相同,都支持variable arguments

相关文章

网友评论

      本文标题:@function/@return 函数指令 (Function

      本文链接:https://www.haomeiwen.com/subject/ryoacxtx.html