前端開發時，常會遇到重複寫著相似的程式。
相似的程式有共同的特性。
因為共同特性而重複出現，這時就會需要使用 mixin。

此圖是之前專案的截圖，簡單來說這3個區塊都有類似的味道存在，因此試著用 mixin 來開發是最省事的。

說這麼多，那 mixin 要怎麼寫?

首先，分為設計和使用兩個階段，
設計階段使用 @mixin 來創造一個 mixin。

@mixin colorChange {
  color: #aabb00;
}

就像寫 function 一樣，後面放上這個 mixin 的名字，接著就如同 CSS 般用大括號將你要重複的 CSS 樣式放在裡面。

使用階段就是用 @include 來放入你使用的地方。而這是可以重複使用的，你想在100個類似的區塊中使用相同架構就呼叫100次吧!

大家還記得第一天的範例嘛? 忘了也沒差，我在下面再貼一次。
這次我要將"測試中~~~"換成草綠色。
用 @include 進來的 mixin，裡面的 CSS 會直接複製一份到你丟入的 class 中。

HTML

<div class="tsDiv">
    <p class="tsP">測試中~~~</p>
</div>

SCSS

.tsDiv {
  > .tsP {
    @include colorChange;
    // color: red;
    &:hover {
      color: blue;
    }
  }
}

因為是複製一份，所以上下兩段其實是相同的意思。

.tsDiv {
  > .tsP {
    color: #aabb00;
    // color: red;
    &:hover {
      color: blue;
    }
  }
}

mixin 的更進階一點的寫法?

上面的範例沒有使用參數，所以無法展現 mixin 強大的地方。

開頭說過 mixin 用於處理重複的樣式，

但對於大部分重複，小部分有所差異的樣式也是能迎刃而解。

上面那張書店活動的圖，雖然結構一樣，但顏色還是有差，

我們將 HTML 結構改成這樣

<div class="tsDiv">
    <p class="tsP">測試中~~~</p>
    <span class="tsSpan">我是小區塊</span>
    <p class="tsP2">我是第二個 P!</p>
</div>

設計一個新的 mixin，裡面依舊放著你要重複的 CSS，只是這次多了幾個可以不一樣的小地方。

@mixin colorChange($p1Color, $spanColor, $p2Color) {
  > .tsP {
    color: $p1Color;
  }
  > .tsSpan {
    color: $spanColor;
  }
  > .tsP2 {
    color: $p2Color;
  }
}

我們在 mixin 名字後面加上參數，用法與 JavaScript 的 function 類似，只是在命名參數時需要使用 $ 符號作為開頭。

將命名好的參數丟到需要微調的樣式中，這裡我要連續改三個顏色，所以分別丟到各自的 color 中。

使用階段一樣用 @include，

.tsDiv {
  @include colorChange(#aabb00, red, #00bbaa)
}

看起來有點像在呼叫這個 mixin，然後放上想要呈現的樣式。

有學過 JavaScript 的應該覺得不陌生，

給沒學過的說明一下參數的應用，如上面的程式碼，我用 @include 進來的 colorChange 這個 mixin，括號內的 ##aabb00、red 及 #00bbaa 分別對應 $p1Color、$spanColor 及 $p2Color。這些自己設定的值就會被傳入該 mixin 中，因此只要修改一下值後，對應的參數所呈現的值也會隨之修改。

下圖是參數應用後渲染到畫面上的樣子。

看到這裡大家可能又會想，又是改顏色= =
不過因為改顏色最直接也最簡單，就索性用這個範例喽~(我就懶

喔對，設計階段和使用階段是筆者自己在講的，去外面講八成大家都聽不懂XD
算是一個小記法吧~ 總之就像讀書一樣，自己都有自己的讀法~
明天開始就是 CSS 的設計模式喽，雖然不是 SCSS 專屬，但了解這些東西有助於未來維護網頁用，不至於到時完全看不懂自己的架構到底是啥~~ 那今天的分享就到這邊，盡請期待明天喔~~
打完才想到還沒吃午餐...