免費(fèi)AI編程助手
Sass 將內(nèi)容塊傳遞給Mixin
2018-12-30 15:53 更新
描述
塊樣式被傳遞到mixin以用于樣式中的放置。在 @content 指令位置中，樣式包含在mixin中。
變量范圍和內(nèi)容塊
在傳遞給定義了塊的mixin的作用域中評(píng)估內(nèi)容塊。
例子
下面的示例演示了如何在SCSS文件中使用傳遞內(nèi)容塊來(lái)混合:
pass_content.html
<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>
接下來(lái)，創(chuàng)建文件 sample.scss 。
sample.scss
@mixin element{
@content;
}
@include element{
.block{
color: green;
}
}
您可以通過(guò)使用以下命令讓SASS查看文件并在SASS文件更改時(shí)更新CSS:
sass --watch C:\ruby\lib\sass\sample.scss:sample.css
接下來(lái)執(zhí)行上面的命令，它將自動(dòng)創(chuàng)建 sample.css 文件，代碼如下:
sample.css
.block {
color: green;
}
輸出
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:
將上述html代碼保存在 pass_content.scss 文件中。
在瀏覽器中打開(kāi)此HTML文件，將顯示如下輸出。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：