免費 AI IDE
Sass 包含Mixin
2018-12-30 15:54 更新
描述
@include 指令用于在文檔中包含mixin。將使用mixin的名稱，并將可選參數(shù)傳遞給它。由mixin定義的樣式可以包含在當(dāng)前規(guī)則中。
例子
下面的例子演示了如何在SCSS文件中使用mixin:
sample.html
<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>
接下來，創(chuàng)建文件 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
接下來執(zhí)行上面的命令，它將自動創(chuàng)建 sample.css 文件，代碼如下:
sample.css
.cont {
background-color: #77C1EF;
color: #ffffff;
}
h3 {
color: #ffffff;
}
輸出
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:
將上述html代碼保存在 sample.htm 文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。
以上內(nèi)容是否對您有幫助：
更多建議：