开发学习网Sass - 函数指令
原创Sass - 函数指令
在本章中，我们将学习函数指令。在Sass中，您可以创建自己的函数，并在脚本上下文中使用它们，或者与任何值一起使用。通过使用函数名和任何参数来调用函数。
示例
以下示例演示了在SCSS文件中使用函数指令的方法：
function_directive.htm
<html>
<head>
<title>嵌套规则</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "container" id = "set_width">
<h2>函数指令示例</h2>
<p>SASS代表Syntactically Awesome Stylesheet。</p>
</div>
</body>
</html>
接下来，创建文件style.scss。
style.scss
$first-width: 5px;
$second-width: 5px;
@function adjust_width($n) {
@return $n * $first-width + ($n - 1) * $second-width;
}
#set_width { padding-left: adjust_width(10); }
您可以使用以下命令告诉Sass监视文件，并在Sass文件更改时更新CSS：
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来，执行上述命令；它将自动创建style.css文件，其中包含以下代码：
style.css
#set_width {
padding-left: 95px;
}
输出
让我们执行以下步骤，看看上述代码如何工作：
将上述HTML代码保存在function_directive.html文件中。
在浏览器中打开此HTML文件，将显示如下所示的输出。
在输出中，您可以看到已应用左内边距。
就像mixin一样，函数也可以访问全局定义的变量，并且可以接受参数。您应该使用@return来调用函数的返回值。我们可以使用关键字参数调用Sass定义的函数。
调用上述函数如下所示：
#set_width { padding-left: adjust_width($n: 10); }
命名约定
为了避免命名冲突，可以为函数名添加前缀，以便轻松区分。与mixin一样，用户定义的函数也支持可变参数。函数和其他Sass标识符可以互换使用下划线(_)和连字符(-)。
例如，如果函数定义为adjust_width，它可以作为adjust-width使用，反之亦然。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。
上一篇：
Sass - Mixin 指令 下一篇：
Sass - 输出样式
相关文章
作者文章
- CSS 使用CSS数学函数 4个月前 (08-23)
- CSS Textual data types 4个月前 (08-23)
- CSS 数字数据类型 4个月前 (08-23)
- CSS CSS 属性值定义语法 4个月前 (08-23)
- CSS 使用 CSS 过渡 4个月前 (08-23)