Sass - 將內容塊傳遞給 Mixin

上一步

下一步

描述

將樣式塊傳遞給 mixin 以將其放置在樣式內部。在 @content 指令位置，樣式將包含在 mixin 內。

變數範圍和內容塊

內容塊在傳遞給定義該塊的 mixin 的作用域中進行評估。

示例

以下示例演示如何在 SCSS 檔案中將內容塊傳遞給 mixin -

pass_content.htm

<html>
   <head>
      <title>Mixin example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "sample.css"/>
   </head>
   
   <body>
      <div class = "block">
         <h1>Example using passing content blocks</h1>
         <p>Different Colors</p>
         <ul>
            <li>Red</li>
            <li>Green</li>
            <li>Blue</li>
         </ul>
      </div>
   </body>
</html>

接下來，建立檔案 sample.scss。

sample.scss

@mixin element {
   @content;
}

@include element {
   .block {
      color: green;
   }
}

透過使用以下命令，你可以讓 SASS 監視檔案，並在 SASS 檔案更改時更新 CSS -

sass --watch C:\ruby\lib\sass\sample.scss:sample.css

接下來，執行上述命令；它會自動建立 sample.css 檔案，其中包含以下程式碼 -

sample.css

.block {
   color: green;
}

輸出

讓我們執行以下步驟，瞭解上述程式碼是如何工作的 -

將以上給出的 html 程式碼儲存到 pass_content.scss 檔案中。
在瀏覽器中開啟此 HTML 檔案，會顯示如下所示的輸出。

sass_mixin_directives.htm

列印頁面

上一步

下一步