Sass - 定義混合

說明

@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">
         <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 檔案，將顯示如下所示的輸出。

sass_mixin_directives.htm

列印頁面