學會 Mixin，讓你 SCSS 開發更快速

以往自己在寫 CSS 時，多少會遇到想要寫某一個效果卻忘記怎麼開始，然後就需要上網找怎麼解決問題。當下雖然問題解決了，不過可能過沒多久，當遇到同樣問題時，又需要再去找解法，這時候 Mixin 就派上用場了。

如何開始用 Mixin

基本用法

Mixin 的用法我覺得有點像變數，只是差在變數只能給一個值，而 Mixin 則是把一個物件定義成一個變數，然後要用的時候再呼叫變數名稱就可以使用裡面的方法，就像下面的 CodePen：

See the Pen mixin demo by Bucky Chu (@bucky0112) on CodePen.

// 定義一個 @mixin，並給它一個名稱
@mixin hide-text {
    text-indent: 110%;
    white-space: nowrap;
    overflow: hidden;
}

// 要使用時，呼叫 @include 加上 mixin 名稱 .h1 { @include hide-text }

帶入參數的用法

這是比較進階的用法，用法跟 JavaScript 的函式蠻像的，可以帶入複數個參數，非常方便，寫 CSS 變的更像在寫一般程式語言了。

// 下面有重複使用的部份
.head {
  font-size: 25px;
  line-height: 2em;
  color: #ff0999;
  margin: 15px;
}

.main { font-size: 25px; line-height: 2em; color: #ff0999; margin: 15px; }

.footer { font-size: 25px; line-height: 2em; color: #ff0999; margin: 15px; }

// 可以帶入參數來更靈活使用
@mixin p-style($p-size, $p-color) {
  font-size: $p-size;
  line-height: 2em;
  color: $p-color;
  margin: 15px;
}

.head { @include p-style(20px, #677962); }

.main { @include p-style(30px, #933962); }

.footer { @include p-style(10px, #946809); }

See the Pen mixin demo2 by Bucky Chu (@bucky0112) on CodePen.