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

例

以下示例演示了SCSS文件中函数指令的使用-

function_directive.htm

      
      
      
      
   

   
      

         
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文件，显示输出，如下所示。

在输出中，您可以看到正在应用左填充。

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

如下所示调用上述函数。

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

命名约定

为了避免命名冲突，可以在函数名称前添加前缀，以便于区分它们。像mixin一样，用户定义的函数也支持变量参数。函数和其他SASS标识符可以互换使用下划线（_）和连字符（-）。

例如，如果一个函数定义为adjust_width ，则可以将其用作adjust-width ，反之亦然。