该@include指令用于包括文档中的混入。使用mixin的名称,并将可选参数传递给它。mixin定义的样式可以包含在当前规则中。
以下示例演示了在SCSS文件中包括mixin的用法:
<html> <head> <title> Mixin example of sass</title> <link rel = "stylesheet" type = "text/css" href = "sample.css"/> </head> <body> <div class = "cont"> <h2>Example using include</h2> <h3>Different Colors</h3> <ul> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> </div> </body> </html>
接下来,创建文件sample.scss。
@mixin style { .cont{ background-color: #77C1EF; color: #ffffff; } h3 { color: #ffffff; } } @include style;
您可以使用以下命令,让SASS监视文件并在SASS文件更改时更新CSS:
sass --watch C:\ruby\lib\sass\sample.scss:sample.css
接下来,执行以上命令;它将使用以下代码自动创建sample.css文件:
.cont { background-color: #77C1EF; color: #ffffff; } h3 { color: #ffffff; }
让我们执行以下步骤,看看上面给出的代码如何工作-