Sass:将内容块传递给Mixin

描述

样式块将传递到mixin中,以放置在样式内。在@content指令位置,样式被包含在mixin中。

可变范围和内容块

在范围内评估内容块,并将其传递到定义块的mixin中。

以下示例演示了如何将内容块传递给SCSS文件中的mixin。

pass_content.htm

<html>
   <head>
      <title>Mixin example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "sample.css"/>
   </head>
   
   <body>
      <div class = "block">
         <h1>Example using passing content blocks</h1>
         <p>Different Colors</p>
         <ul>
            <li>Red</li>
            <li>Green</li>
            <li>Blue</li>
         </ul>
      </div>
   </body>
</html>

接下来,创建文件sample.scss

sample.scss

@mixin element {
   @content;
}

@include element {
   .block {
      color: green;
   }
}

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

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

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

sample.css

.block {
   color: green;
}

输出量

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

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

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

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

相关推荐

发表回复

登录后才能评论