編程教程Sass 定義Mixin
描述
@mixin指令用于定義mixin，它可選地包括mixin名稱后面的變量和參數。
例子
以下示例演示如何在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"> <h1>Example using include</h1> <h3>Directive is used to define the Mixins, it includes variables and argument optionally.</h3> </div> </body> </html>
接下來，創建文件sample.scss。
sample.scss
@mixin style {
.cont{
color: #77C1EF;
}
}
@include style;您可以通過使用以下命令讓SASS查看文件并在SASS文件更改時更新CSS:
sass --watch C:\ruby\lib\sass\sample.scss:sample.css
接下來執行上面的命令，它將自動創建sample.css文件，代碼如下:
sample.css
.cont {
color: #77C1EF;
}輸出
讓我們執行以下步驟，看看上面的代碼如何工作:
將上述html代碼保存在sample.htm文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。
