Sass - 函数指令

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

示例

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

function_directive.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。

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，反之亦然。

打印页面