描述
样式块将传递到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
支付宝
微信