在之前我們都是在講關於Sass與Compass的語法教學，
這次我們來談談該如何使用Sass Mixin與Compass該如何結合，
才可以提升網頁設計師撰寫CSS碼的效率。

首先我們先來預設一個設計情境

設計目的：
要在一個DIV裡面載入完整背景圖片、
為了將其完整呈現，
我們同時必須將圖片的高度與寬度記錄下來，
讓他與背景圖案的高寬一致。
設計流程：
流程1.用編輯器寫到一半後，
到資料夾尋找檔案名稱，
並用大腦去暫時記憶他的「檔名」、「高度」、「寬度」
流程2：回到編輯器後一一撰寫時，
又突然忘記了寬度的像素，
於是又回到資料夾再確認一次圖片高度
流程3：回到編輯上再補上高度設定的CSS。

從上述的流程可以得知，
網頁設計師在去設定圖片的寬度和檔名時，
時常必須去透過短暫記憶來記東西，
但這動作做久以後，
大腦其實很容易就會因為過度記憶而感到勞累。

所以透過Compass的image-width()與image-height()的話，
就可以讓Compass自動算出圖片的寬高出來。

所以你就可以寫像這樣子：

//Sass語法
@import compass
.logo
  width: image-width('../images/logo.png')
  width: image-height('../images/logo.png')
  background: url(../images/logo.png)

編譯出來就會像這樣子：

.logo {
  width: 512px;
  width: 512px;
  background: url(../images/logo.png);
}

很神奇吧？
Compass自動會去幫你解讀圖片的寬度，
將你把像素帶進去，
但其實這樣子還是不夠的，
因為今天我要寫一個寬度時，
還必須寫他引入的image-width與路徑，
寫的程式碼還是很多，
不如還是照原來做法比較好。

但如果你把它用成@Mixin的話，
那就好用多了，
像下述寫法：

@mixin bg($img) 
  background: url("../images/#{$img}")
  width: image-width("../images/#{$img}")
  height: image-height("../images/#{$img}")
.logo
  +bg('logo.png')

如果你的變數帶進去，前後有程式碼時，
你可以用#{變數}的方式將值帶進去，
圖片路徑就看你的CSS與images圖片的資料夾對應位置就可找到，
透過這樣子的方式，
以後我只要記一個圖片名稱就好，
就不用一次記那麼多東西了，
是不是很方便呢^_^？

所以透過這樣的方式，
你也可以去尋找如何將Compass的語法進行運算，
來化解過於繁瑣的流程。

這裡也附上影片提供各位參考學習：