傳遞內容塊到Mixin

樣式塊被傳遞給混入用於放置內的樣式。在@content指令的位置,樣式被包含進mixin。

可變範圍和內容塊


內容塊被傳遞到塊被定義一個混合的範圍進行計算。

示例

下面的例子演示了mixin使用內容塊的SCSS文件:

pass_content.html

Mixin示例 - www.yiibai.com

Example using passing content blocks

Different Colors

  • Red
  • Green
  • Blue

接下來,創建文件sample.scss。

sample.scss

@mixin element{
@content;
}

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

你可以告訴SASS監視文件,並隨時使用下面的命令更新SASS文件來修改CSS:

sass --watch C:\Ruby22-x64\sample.scss:sample.css

接着執行上面的命令,它會自動創建 sample.css 文件,下面的代碼:

sample.css

.block {
color: green;
}

輸出結果

讓我們來執行以下步驟,看看上面的代碼工作:

保存上面的html代碼在 pass_content.html 文件。在瀏覽器中打開該HTML文件,得到輸出如下顯示。
傳遞內容塊到Mixin