Sass - 包含混入

說明

@include 指令用於在文件中包含一個混入。混入的名稱被接受並且可選引數被傳遞到混入中。混入定義的樣式可以被包含到當前規則中。

示例

下列示例展示了在 SCSS 檔案中使用包含一個混入的操作：

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 檔案，輸出如下所示：

sass_mixin_directives.htm

列印頁面

上一個

下一個