描述
样式块将传递到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