Categories: Sass教程

Sass:Including a Mixin

描述

@include指令用于包括文档中的混入。使用mixin的名称,并将可选参数传递给它。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">
         <h2>Example using include</h2>
         <h3>Different Colors</h3>
         <ul>
            <li>Red</li>
            <li>Green</li>
            <li>Blue</li>
         </ul>
      </div>
   </body>
</html>

接下来,创建文件sample.scss

sample.scss

@mixin style {
   .cont{
      background-color: #77C1EF;
      color: #ffffff;
   }

   h3 {
      color: #ffffff;
   }
}
@include style;

您可以使用以下命令,让SASS监视文件并在SASS文件更改时更新CSS:

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

接下来,执行以上命令;它将使用以下代码自动创建sample.css文件:

sample.css

.cont {
   background-color: #77C1EF;
   color: #ffffff;
}

h3 {
   color: #ffffff;
}

输出量

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

  • 将上面给定的html代码保存在sample.htm文件中。
  • 在浏览器中打开此HTML文件。

terry

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

Share
Published by
terry

Recent Posts

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

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

10 小时 ago

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

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

1 周 ago

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

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

1 周 ago

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

Vue3中手动清理keep-a…

2 周 ago

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

React 和 Vue 都是当…

3 周 ago