Sass混合指令@mixin和@include用法示例

Sass混合指令 @mixin和@include 用法示例

本文內容來自官網文檔：https://www.sass.hk/docs/ 

 

混合指令（Mixin）用於定義可重復使用的樣式，避免了使用無語意的class，比如.float-left。混合指令可以包含所有的CSS規則，絕大部分Sass規則，甚至通過參數功能引入變量，輸出多樣化的樣式。

 

定義混合指令@mixin

mixin.scss

@mixin large-text {
    font: {
        family: Arial;
        size: 20px;
        weight: bold;
    }
    color: #ff0000;
}

 

 

引用混合指令@include
使用@include指令引用混合樣式，格式是在其后添加混合名稱，以及需要的參數（可選）。

main.scss

@import "mixin";

.page-title {
    @include large-text;
    padding: 4px;
    margin-top: 10px;
}

 

編譯為：

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }