Categories: Sass教程

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

terry

这个人很懒,什么都没有留下~

Share
Published by
terry

Recent Posts

在 Chrome 中删除、允许和管理 Cookie

您可以选择删除现有 Cooki…

6 小时 ago

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

1 周 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

2 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

3 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

4 周 ago