混入 Mixins

將經常被重複使用的程式碼獨立撰寫，以指令 @mixin 宣告，並以指令 @include 呼叫，根據不同參數來設定相似的樣式。

@mixin -> 定義一個「 混合 」
設定要使用的樣式。mixin 相當於統一設定的區塊，在 @mixin 後面的括號內放入參數。
需用 $ 開始你的變數並用逗號分隔它們，撰寫符號格式為 = 。

• 不帶參數
  例如:

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
// reset-list 為混入的名稱 , 大括號內是重複用的樣式 //

• 帶參數
  例如:

@mixin reset-list ($size : 10px){
  margin: $size ;
  padding: $size ;
  list-style: none;
}
// $size 定義參數 //

@include -> 引用一個「 混合 」
套用樣式。把 mixin 設定的內容拉進自己的區塊，讓原本重複的 style 方便地引入要設計的區塊。
例如:

// scss //
@mixin reset-list{
    margin: 10px ;
  padding: 10px ;
  list-style: none;
}
button {
    @include reset-list;
}

編｜
譯｜　　
後｜
　Ｖ

// css //
button {
  margin: 10px;
  padding: 10px;
  list-style: none;
}

• 傳入多個參數
  例如:

／／ｓｃｓｓ／／
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}


.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

編｜
譯｜　　
後｜
　Ｖ

／／ｃｓｓ／／
.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

mixin 可以說是 Sass 中一個強而有力的寫法，甚至它還可以搭配 @content 的寫法傳入整段 CSS
例如:

／／ｓｃｓｓ／／
@mixin small-screen {
  @media screen and (min-width: 800px;) {
    @content;
  }
}

@include small-screen {
  .container {
    width: 600px;
  }

編｜
譯｜　　
後｜
　Ｖ

／／ｃｓｓ／／
 @media screen and (min-width: 800px;) {
    .container {
      width: 600px;
    }
  }