大家好，我是烏木白，今天要和大家介紹～ Sass 的另一個很好用的功能就是！！Mixin

什麼是Mixin？

因為在寫 code 的時候，常常可能會因為不常用的語法，所以要另外去找資料，這時候就可以使用 Mixin 來幫你記住 Css 的技巧，讓你的頭腦不需要打結！

如何使用 Mixin？

以下範例程式碼：

@mixin blueSize {
    color: blue;
    font-size:13px;
}

.header h1 {
    @include blueSize;
    background: #000;
}

.footer h2{
    @include blueSize;
}

因為 Mixin 是會寫一些固定的元件在使用，類似時間線或者一些你在設計稿上類似的元件。這樣寫的用意就是我們不需要遇到的時候一直再去找資料一直複製貼上，我們只需要引入就可以了。

Mixin和變數差異

Mixin 和 變數 的寫法很相似，但是使用的時機不太一樣，就像上述所說的，我們在寫變數是純粹可以隨時更改或改變的資料，但是 Mixin 是盡量以一個的元件為主！

這個是Bootstrap 的Mixin，這樣大家可能比較清楚我的意思！

Mixin + import

歐赴摳斯，我們的 Mixin 也可以和 import 都能一起使用喔！！
但是最重要的一點就是我們要記得載入順序，不然可能會出錯喔！！

參數及Mixin 一起使用

@mixin color ($color){
    color:$color;
    border: 5px solid $color;
    text-decoration: $color;
}

.box {
    @include color(#ff0000);
}

這個的意思就是把我們先把這個程式碼組成一個固定的元件，但是在其他地方可能他的顏色不一樣，所以我們就在把顏色帶入即可。

大家一定要多方嘗試喔！