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文件,显示如下所示的输出。
Sass:功能指令

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

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

如下所示调用上述函数。

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

命名约定

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

例如,如果一个函数定义为Adjust_width,它可以用作Adjust -width,反之亦然。

作者:terry,如若转载,请注明出处:https://www.web176.com/sass/1674.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年1月26日 下午5:48
下一篇 2021年1月26日 下午6:08

相关推荐

发表回复

登录后才能评论