Sass - 功能指令

Sass功能指令 - 从简单和简单的步骤学习Sass，从基本到高级概念，包括概述，安装，语法，使用Sass，CSS扩展，评论，Sass脚本，@ -Rules和指令，控制指令和表达式，Mixin指令，功能指令，输出风格，扩展Sass。

在本章中，我们将研究功能指令.在SASS中，您可以创建自己的函数并在脚本上下文中使用它们，也可以与任何值一起使用.通过使用函数名称和任何参数来调用函数.

示例

以下示例演示了如何在SCSS文件中使用函数指令 : ;

function_directive.htm

         Nested Rules                                             Example for Function directives
         SASS stands for Syntactically Awesome Stylesheet.

接下来，创建文件 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文件，输出显示如下.

Sass Function Directives

在输出中，您可以看到正在应用左边距.

就像mixin一样，函数也可以访问全局定义的变量，也可以接受参数.您应该使用 @return 调用函数的返回值.我们可以使用关键字参数调用SASS定义的函数.

调用上面的函数，如下所示.

  #set_width {padding-left:adjust_width($ n:10); }

命名约定

为了避免命名冲突，可以为函数名添加前缀，以便可以轻松区分它们.与mixins一样，用户定义的函数也支持变量参数.函数和其他SASS标识符可以互换使用下划线(_)和连字符( - ).

例如，如果函数定义为 adjust_width ，它可以是用作 adjust-width ，反之亦然.