Sass - 定义混合

说明

@mixin 指令用于定义混合。它包括在混合名称后面的变量和参数（可选项）。

示例

以下示例演示了在 SCSS 文件中使用 @mixin −

sample.htm

<html>
   <head>
      <title> Mixin example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "sample.css"/>
   </head>

   <body>
      <div class = "cont">
         <h1>Example using include</h1>
         <h3>Directive is used to define the Mixins, it includes variables and argument optionally.</h3>
      </div>
   </body>
</html>

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

sample.scss

@mixin style {
   .cont{
      color: #77C1EF;
   }
}
@include style;

你可以使用以下命令告诉 SASS 监视该文件，并在 SASS 文件更改时更新 CSS −

sass --watch C:\ruby\lib\sass\sample.scss:sample.css

接下来，执行以上命令；它将自动创建 sample.css 文件，如下所示 −

sample.css

.cont {
   color: #77C1EF;
}

输出

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

将上面给出的 html 代码保存在 sample.htm 文件中。
在此浏览器中打开此 HTML 文件，将显示如下所示的输出。

sass_mixin_directives.htm

打印页面