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

如何開始用 Mixin

基本用法

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

1
2
3
4
5
6
7
8
9
10
11
// 定義一個 @mixin，並給它一個名稱
@mixin hide-text {
	text-indent: 110%;
	white-space: nowrap;
	overflow: hidden;
}

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

帶入參數的用法

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 下面有重複使用的部份
.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 可以帶入參數來更靈活使用
@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);
}