iT邦幫忙

DAY 23
2

Sass3.3 & CSS設計模式系列 第 24

Sass教學 (23) - Susy2學習摘要

  • 分享至 

  • xImage
  •  

以下文章同步於Github

在你即將開始進入Susy2的世界前,
可先瀏覽17.使用Susy2前,你必須要懂的CSS觀念
如果這些觀念還不是很清楚,
建議先把這些基礎打好後再投入學習,
學習曲線才不會這麼高。

Grid settings

當你學得越來越深入後,
你會發現Susy2的核心會一直在Grid settings上打轉,
尤其是Gutter-position的部份,
像是after、before、inside、split都是相當常見的Grid設計方式,
我會建議你至少要懂after、inside、split的排版邏輯,
這樣之後學習上會比較得心應手些。

Compass Vertical Rhythm是實踐文字排版上一個優良方案,
如果你看了第三章還是不了解垂直韻律,
可以瀏覽此簡報
再搭配第三章提供的影片教學就會易懂些了,
Susy2 Grid systme搭配Compass Vertical Rhythm的組合,
讓你的網頁排版能夠遵循著規則在設計頁面,相當推薦!

版型設定

當你慢慢對Grid settings熟悉後,
就可以開始用他來排一些Grid出來,
像是我的教學章節中,有拿960Grid來編譯出相同的 Grid出來,
如果你在以前就有使用過一些Grid system,
那就試著透過Susy2把他實踐出來,
這樣有助於你對Grid Settings有更加的了解。

Susy2在透過Grid settings設定上相當靈活, 你在實作中會慢慢發現,
有好幾種設定方式都可以達成你要的效果,
所以在投入的過程中,就可以開始找出你習慣的設定方式,

建立出你要的Grid以後,
排版的細節可以瀏覽shorthand(簡寫) 與12~14章介紹各個提供排版的功能,
在設計的過程中,忘了語法也可以瀏覽速記表來查詢。

另外如果你希望一個版型同時擁有兩個以上的Grid樣式的話,
可以使用with-layout的Mixin,Sass Bites也有在youtube分享過此功能的實作方式。

RWD排版流程

Susy2的RWD排版方式有載入 breakpoint這個Sass framework,
所以建議先把breakpoint搞懂後,
再來使用Susy2的susy-breakpoint會比較容易進入狀況。
在6~10章的篇幅,也詳細介紹了Susy2在RWD上的靈活性,
你可以視你的專案狀況,來客製化你想要的RWD Grid,

而並非像是Bootstrap與Pure,
都只能固定幾個columns,gutter也都不能變動,
在Susy2的世界,你能夠在每個斷點上設定你想要改為幾個columns,
要不要有gutter、是否要變動為不對稱(Asymmetrical)的版型,
再透過with-layout的Mixin,
你甚至能設定一個網頁上有多種的Grid,各遇到RWD斷點時透過Grid settings來設定呈現方式,
這就是Susy2最大魅力所在,Enjoy it!


上一篇
Sass教學 (22) - 使用Susy2前,你必須要懂的CSS觀念
下一篇
Sass教學 (24) - Sass 3.3 Source Maps
系列文
Sass3.3 & CSS設計模式46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言