描述
该@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
支付宝
微信