内容块被传递到样式中的位置的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
执行完上述命令后, 它将使用以下代码自动创建一个名为” simple.css”的CSS文件。
.block {
color: blue; }
你可以看到自动创建的CSS文件。
输出
应用CSS后, 请查看输出。
评论前必须登录!
注册