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/

本文同步發表於

在〈SUSY使用心得〉中有 1 則留言

  1. 自動引用通知: SUSY | Pearltrees

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Time limit is exhausted. Please reload the CAPTCHA.