SUSY相較於Bootstrap而言，是一個靈活度較高的Framework，以下記錄一下使用SUSY的心得。
接觸時間不長，內容如有誤還請指正，謝謝。
SUSY相較於Bootstrap而言，是一個靈活度較高的Framework，以下記錄一下使用SUSY的心得。
接觸時間不長，內容如有誤還請指正，謝謝。

使用SUSY需要先下幾個設定值：
$total-columns: 總行數，數值為無單位數字。例如：4, 8, 12...
$column-width: 每行寬度，單位可以是px也可以是%。
$gutter-width: 每行間距的寬度，單位跟$column-width要一樣。
$grid-padding: 左／右行外側間距寬度，跟上面加一加不能超過總寬度。

再來是設定斷點，也就是螢幕小於多少後要開始變更配置。
因為SUSY是將手機顯示放在最前面的，
所以設定上要按照小->大的順序，不然就會動不了～
其他...就是自己設定了xD

我認為SUSY的設定不難，可以自己安裝或者使用Fireapp @import susy。
使用上只要套用官方的CSS設定寬度、格線等，命名還是可以用自己易記的，外觀設計樣式也可自己掌控，等於只是使用官方給的框架而非樣式，這也是其靈活度高的原因。
像現在Bootstrap要從2.3升到3的話就得全改命名就比較費工囉。

教學的部分，非常推薦Even大大的“RWD 一小時就上手”：https://speakerdeck.com/evenwu/rwd-xiao-shi-jiu-shang-shou
以及Muki大大的“好用的 Responsive grids : SUSY 實作感想”：http://www.mukispace.com/susy-responsive-grids-for-compass/

本文同步發表於http://azzurro.blog.aznc.cc/make_a_website_27/