描述
该@include指令用于包括文档中的混入。使用mixin的名称,并将可选参数传递给它。mixin定义的样式可以包含在当前规则中。
例
以下示例演示了在SCSS文件中包括mixin的用法:
sample.htm
<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。
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文件:
sample.css
.cont { background-color: #77C1EF; color: #ffffff; } h3 { color: #ffffff; }
输出量
让我们执行以下步骤,看看上面给出的代码如何工作-
- 将上面给定的html代码保存在sample.htm文件中。
- 在浏览器中打开此HTML文件。
作者:terry,如若转载,请注明出处:https://www.web176.com/sass/1682.html