Sass - 函数指令

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

例子

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

函数指令.htm

<html>
   <head>
      <title>Nested Rules</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>Example for Function directives</h2>
         <p>SASS stands for Syntactically Awesome Stylesheet. </p>
      </div>
   </body>
</html>

接下来，创建文件style.scss。

样式.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文件 -

样式.css

#set_width {
   padding-left: 95px; 
}

输出

让我们执行以下步骤来看看上面给出的代码是如何工作的 -

  • 将上面给出的 html 代码保存在function_directive.html文件中。

  • 在浏览器中打开此 HTML 文件，输出如下所示。

Sass 函数指令

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

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

调用上述函数如下所示。

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

命名约定

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

例如，如果函数定义为adjustment_width，则它可以用作adjustment-width，反之亦然。