个性化阅读
专注于IT技术分析

SASS将内容块传递给Mixin

内容块被传递到样式中的位置的mixin。 Sass 3.2版中添加了此功能。样式包含在@content指令位置的mixin中。

内容块在范围中指定, 并且范围在定义块的mixin中传递。

Le举例说明如何将内容块传递到SCSS文件中的mixin。

使用以下代码创建一个名为” simple.html”的HTML文件。

<html>
<head>
   <title>Pass content block to mixin example</title>
   <link rel="stylesheet" type="text/css" href="simple.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>

现在, 创建一个名为” simple.scss”的SCSS文件, 其代码如下:

@mixin element{
   @content;
}
@include element{
  .block{
    color: blue;
  }
 }

打开命令提示符并运行watch命令, 以告知SASS监视文件并在更改SASS文件时更新CSS。

萨斯–watch simple.scss:simple.css

Sass将内容块传递给mixin1

执行完上述命令后, 它将使用以下代码自动创建一个名为” simple.css”的CSS文件。

.block {
  color: blue; }

你可以看到自动创建的CSS文件。

Sass将内容块传递给mixin2

输出

应用CSS后, 请查看输出。

Sass将内容块传递给mixin3
赞(0)
未经允许不得转载:srcmini » SASS将内容块传递给Mixin

评论 抢沙发

评论前必须登录!