在以前寫CSS的時候，
我們時常會遇到以下的情境，

在開發多種CSS樣式時，會講第一次寫的程式碼複製貼上後，
再進行修改，但當樣式整個大修時(例：圓形改方形)，
則又必須將所有CSS重新修正，頗不方便。

但使用Sass mixin的話，
上述的問題皆可解決，
同時還可傳入多個變數進去，
我們先來看下面的code：...
在以前寫CSS的時候，
我們時常會遇到以下的情境，

在開發多種CSS樣式時，會講第一次寫的程式碼複製貼上後，
再進行修改，但當樣式整個大修時(例：圓形改方形)，
則又必須將所有CSS重新修正，頗不方便。

但使用Sass Mixin的話，
上述的問題皆可解決，
同時還可傳入多個變數進去，
我們先來看下面的code：

$font-size:13px
@mixin bg 
	background: #000
	font-size: $font-size
.header
	+bg

而產生出來就會變成如下：

.header {
  background: black;
  font-size: 13px;
}

前面必寫@mixin，後面的bg則是命名mixin名稱。
所以如果.header要載入的話，寫「+」後面接mixin名稱就可載入。
同時你也可載入外面的變數進來，當來你也可在裡面做加減乘除。

但今天假設背景顏色隨時會更動，
你也可以在mixin建立變數：

$font-size:13px
@mixin bg($bgcolor) 
	background: $bgcolor
	font-size: $font-size
.header
	+bg(#000)
.content
	+bg(#fff)

那產生出來的結果就會是：

.header{
  background: black;
  font-size: 13px;
}	
.content{
  background: white;
  font-size: 13px;
}

mixin專屬變數也可具有變數預設值，並載入多種變數：

@mixin bg($bgcolor:#000,$width:200px) 
	background: $bgcolor
	width: $width
.header
	+bg
.footer
	+bg(#ff0000,300px)

編譯出來結果為

.header {
  background: black;
  width: 200px;
}
.footer {
  background: red;
  width: 300px;
}

透過這種變數載入方式，
就可以將樣式給抽出來，
透過mixin來進行集中管理與設計，

附上範例影片，
任務為設定各種不同圓形樣式的元素：

1.01:00秒：寫完一個樣式後，開始設計mixin。
2.01:35秒：樣式抽離後，便可在設定各class的獨一background樣式
3.01:54秒：由於每個圓形大小不一樣，於是設定變數來產生出不同大小
4.02:40秒：Mixin也可載入外部變數
5.02:50秒：瀏覽原生CSS可觀察出其變化性。

透過上述範例就可了解@Mixin的強大之處，
他可以透過導入變數，
讓你保有一致性，
同時又可設計出具有靈活、彈性的樣式出來。

我們再來看一個範例：

1.00:00秒：table.style*2>tr*2>th{標題}+td{內容}是使用emmet的方式來打HTML，展開後就變成兩個class為 style1與style2的table出來，兩行兩欄式，左欄th右欄td。
2.01:20秒：Mixin也可載入一整個CSS片段碼
3.01:40秒：從操作流程可以看出如何設計CSS的樣式集中管理與獨特性設計。

--

相信從上範例，
大家也可了解Sass Mixin的迷人之處，
這東西同時也帶給網頁設計師一個新的設計思維，
來去思考如何設計出方便管理的CSS碼出來，
直到現在我也仍然在追尋更佳的Sass管理流程呢，
希望透過上述的設計範例能帶給大家對CSS的設計觀念能有所啟發，
一起加油嘍:D