iT邦幫忙

DAY 27
8

作個網站吧!系列 第 27

作個網站吧!SUSY使用心得

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/


上一篇
作個網站吧!除蟲幫手們
下一篇
作個網站吧!檔案控管-SourceTree
系列文
作個網站吧!30

1 則留言

我要留言

立即登入留言