@include 指令用于包含mixin到文檔中。mixin名稱取自可選的參數(shù)傳遞給它。由mixin定義的樣式可以包含到當前的規(guī)則。
示例
下面的例子演示了使用,包含 mixin 在 SCSS 文件中:
sample.html
<html>
<head><meta charset="utf-8"> <title>Sass Mixin 示例</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>
接下來,創(chuàng)建文件sample.scss。
sample.scss
@mixin style {
.cont{
background-color: #77C1EF;
color: #ffffff;
}
h3 {
color: #ffffff;
}
}
@include style;
可以告訴SASS監(jiān)視文件,并隨時使用下面的命令更新SASS文件來修改CSS:
sass --watch C:\Ruby22-x64\sample.scss:sample.css
接著執(zhí)行上面的命令,它會自動創(chuàng)建 sample.css 文件,下面的代碼:
sample.css
.cont {
background-color: #77C1EF;
color: #ffffff;
}
h3 {
color: #ffffff;
}
輸出結果
讓我們來執(zhí)行以下步驟,看看上面的代碼工作:
保存上面的html代碼在 sample.html 文件中。
在瀏覽器中打開該HTML文件,輸出如下得到顯示。