上篇文章好像太早發了，導致系統沒更新，所以第30天煩請以此文章為主

關於Sass的基礎知識，
其實在這30天都講得差不多了，
如果有興趣想再深入了解的話，
可以再瀏覽下述文章：
Sass超讚樣式表：https://github.com/hlb/sass-doc-zh/blob/master/SASS_REFERENCE_ZH_TW.md

這一章節我會再介紹Compass一個功能，
以及一些我自己有在用的前端開發工具給大家參考，
之後的時間我會再針對實務開發面的部份來去切入，
例如切版流程、RWD建置流程等等，
好讓各位想投入Sass的朋友知道該如何逐步導入到自己的專案中，
進以節省摸索的時間^_^

首先我們先來介紹inline-image('圖片路徑')，
只要在裡面加上圖片路徑後，
編譯出來的CSS就會將該圖片變成data64編碼，
但編碼後有什麼好處呢？
好處就是當你圖片刪除掉後，
你網頁上還是會因為編碼而存留圖片樣式，
這在一些行動裝置或小icon為了避免過多網頁請求數，
有些網頁設計師也會這樣來做設計：
範例碼如下：

.bg
  background: inline-image('fb.png')

//編譯後就會變成↓

.bg {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMi8xMFUICZQAAAQRdEVYdFhNTDpjb20uYWRvYmUueG1wADw/eHBhY2tldCBiZWdpbj0iICAgIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+Cjx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDQuMS1jMDM0IDQ2LjI3Mjk3NiwgU2F0IEphbiAyNyAyMDA3IDIyOjM3OjM3ICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4YXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eGFwOkNyZWF0b3JUb29sPkFkb2JlIEZpcmV3b3JrcyBDUzM8L3hhcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhhcDpDcmVhdGVEYXRlPjIwMTAtMDctMTJUMjE6NDg6MTZaPC94YXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhhcDpNb2RpZnlEYXRlPjIwMTAtMDctMTJUMjE6NTg6MTlaPC94YXA6TW9kaWZ5RGF0ZT4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGL5W6wAAAQNSURBVGiB1VpLi2NFFP7qcR+5uem0GXsmLQqK40pcxVlkVAQhIvjoleBeFBWZsReNP8CNqxFlwNGNG/0Dg+KTYRbKoMwwbty6EIQWITh02+nc3KrPxe0kHTuppDtzb6c/CITUqbrn1HcedW5FkAQANJ+/UFPKe1sqrymVagghVgCBRQFp27TmljHpLyZNLt/46qNNABAk8cSL642gVPkyjCp1P4igPB9SaogFMYAgaA3SNEGvu4Pdna32bmdr7aerl34UzRfeqZXj2m/x8ul6GFWglA+pFISQx633CEgLaw1M2kO3s43tf/668+9W+1EdhvHFuLpSL8c1KO3tn3F82o6BgICSGsrXUEoDZDVNkw0dREutIKpAag1isZSeBKk0gihGuFttac8v1aXywAXb8WmQUsPzS3UtpVICWDiXmQYhBJRUSvcTzUlxnz4IgALQJDL3OWEMgARJaIAn1gCQ0P0vRRsQeBKt8w/j3GMP4JEHV8bKvLL+BaTS4xcgAQKaZOb/RRlAYnUlwruvPYMz91acokm3g6AUT1yHJDRpQdocNB0PTxEbrz49VXkAMCaZrBsJ0u4L4gKyEGnRevIsVk8vzyjPyfVpz3M0+0FcgAFpL8FT587OLD/c3PGDhbuQSbu4f7U2+wSXboM0yuIY8LSAp9XYsfc++BzfXv91sON+GKOyfMbJADIGiosB1wH9+s+/o3LPfZAqM1BKDaX9BXIhZk3JJHhhhLC8dKAPmSELFeRCdJ+2hFAAxOyn4r31MgaszaX9tSbF1U/fnEn268/WD/z20usfOysxrYVGjjHQ6+3OPd+X5fGDRcSATXtzz6c/OQaQdwzM22MMi+yEUaJfifNhYN42lXTpRhB5M3BXDHAxQGhnuZ4TQgicX9tAr7uTPdIa3PzuyljZx599A0IOq7QXRChXTrkZyDsGpPYRxTXYqAoA6HU7E2VL8Sl4QWk4VypIVyUexIBlbnVAQEB74fCRDpfSfgg/OJgyaSczAGuLPU47uz6nv4+dsNcPFHicdj3n8HoMCllxDLh22J1xxs7oZ6EiW8ocDMioI4D83Wi6AYd1oZEgzh93mwGMxkD+cJ2NDr+Rg36gT10B10kuFzlSFrL7m/r8kVMWKvK14pSxI8VAgUEMIdBovYX0f52a9kIE5epR02hxBkip4UdL8OzoC1shJaTURzAA0FkJK4gBKaFk4FLpEItlmmuQ5sRdbgDYM8Bo0m6S9iH3e7MFBAlabmprzTXSNiEW428Fs4KwsEyvSZsml6wxf49cNZ2AD016x6TJ+/L2D5+00153zRrbXgC9ZvpYa7fTpPvy7e+v/Cn6qavx3IW60sFFKVVTSNEAxITLqeMCOyRv0ZobppdcvvnNh38AwH/CipuzINmBzAAAAABJRU5ErkJggg==');
}

前端的工具很多，
這裡則先提出一個每位網頁與前端設計師都一定要裝的東西，
那就是Livereload，

這個工具他會自動觀察如果你是否有更新HTML、CSS、JS、IMG等資料，
網頁也會自動F5更新，
這樣子一來你就不需要再必須一直按F5來更新畫面了。

安裝的流程為：
1.先到Livereload的官網下載主程式並安裝，官網連結：http://livereload.com/
2.再到chrome store下載Livereload插件，插件網址：http://ppt.cc/UJ8Y
安裝完以後，你就會發現chrome瀏覽器右上角有一個圓形環繞箭頭的圖案。

3.如果是用windows環境的話，先開啟PC上面的Livereload軟體，點選[+add]後指定要觀察的資料夾路徑
4.再到chrome的livereload圖案上點一下，點了後滑鼠滑過去會顯示「Livereload is connecting,click to disable」。

5.更新html檔案，如果瀏覽器也跟著更新，那麼恭喜你成功了！

PS：你的瀏覽網址請必須要用localhost設定，如果你是直接打開網頁是沒辦法生效的。
關於localhost設定可以瀏覽此連結：http://ppt.cc/nyQm

我自己是用fire.app內建的Livereload，
內建也有localhost的port，相當的方便。
介紹網址：http://fireapp.kkbox.com/doc/tw/preference.html

最後再介紹一個二個小工具：
FSCapture：截圖軟體，但我拿它來計算實際px高寬(咦？
下載連結：http://briian.com/?p=5713
CaptureColor：吸色軟體，相當輕便的吸色器。
下載連結：http://steachs.com/archives/794#more-794
實際操作流程我想就瀏覽影片最尾端的一兩分鐘來看看為什麼我會用這兩個東西來加速前端效率唄^_^