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,如若转载,请注明出处:https://www.web176.com/sass/1682.html

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

相关推荐

发表回复

登录后才能评论