延續第二章，
我們就開始排網頁了。
由於一天時間有限，
所以分上下兩集來播放與解說。

你可以從影片內容可以發現到，
一個網頁設計在排版時，
在一邊進行前端設計時，
也不時會尋找相關資料，
進以藉由專案逐步提升寫code能力。

1.00:00秒
由於剛建立的Sass專案沒有html檔案，
所以我先建立index.html，
並用emmet來寫前半部html。

2.01:33秒
我習慣把內容貼在記事本上，
再一一貼到HTML。
表頭的部分通常都是看細節內容來決定要用相對定位絕對定位來排版，
或者是用float排版。
這部分則是看專案內容而定，
而這次排版我則全都用相對與絕對定位來排。
如果是用float的話，
logo則靠左，
右上角社群列與選單置右，
社群列再margin-bottom來和選單產生間距。
影片請用720P+全螢幕高清瀏覽：

3.02:40秒
發現好像沒有吃到CSS設定，
原來是我的HTML的CSS路徑前面忘了加上CSS，
也就是css/default.css

4.03:32秒
使用了第30天分享到的FastStone工具，
來去量測元素間的間距。

5.04:00秒
image-url()的方式，
可以讓你直接指定到資料夾位置，
這樣不用每次background都必須加類似../images/圖片檔名
並使用了熱建Ctrl+k b瀏覽圖片名稱是否無誤

6.04:30秒
因為必須時常去搜尋圖片的寬高，
所以去找了第19天的可以自動計算圖片寬高的語法，
並放到 _mixin.sass資料夾。

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

7.07:20秒~08:20秒
因圖片路徑寫錯，
所以花了些時間找問題

8.09:35秒
全域變數開始起功用了，
只要我打上$text-color與$hot-color後，
之後我就不用再一直打冗長且都記不住的顏色碼了。

9.12:20秒
因為裡面的東西我打算用float排版，
所以外框則寫了clearfix設定。

10.13:19秒
運算功能也起了作用，
因我不想去計算，
所以我直接用全域整體寬度扣掉左邊，
自然就會變成右邊的寬度。

width: $width - 640px

11.15:28秒
因為右邊我寫死了寬度，
但裡面的東西我想要用padding推，
但如果塊狀寫死寬度的話，
再加上padding會使得div的寬度受影響。
所以google是否有 sass box-sizing的border-box，
後來發現Compass CSS3 Mixin內建就有了。

+box-sizing(border-box)

12.20:20秒
檢查了下有那些東西我時常會去修改的相同設定，
後來發現行距可以當作全域，
所以新增到變數的Sass檔案去。

13.21:18秒
最後打開編譯出來的CSS檔案，
看看有無問題。