Scss--函数指令--使用/实例

原文网址：Scss--函数指令--使用/实例_IT利刃出鞘的博客-CSDN博客

简介

        本文介绍Scss的函数指令的用法。

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

简单示例

Scss：

$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