CSS – SUSY3 – 使用方法(2)

先了解 3 個方法

了解安裝以後,接著只要這三個方法就能解決複雜的 RWD。

1. span()

跨越一個或多個 column 與 gutter 的佔位寬度。可透過 margin 或 padding 來推拉你的元素。

2. gutter()

3. slice()

很少用,在製作不對稱的柵欄系統時會用到。我暫時還搞不懂,之後學會了再補上來。

 

config

整體設定說明,參考

  • min-width:自訂添加的斷點,給我們的 mixin susy-breakpoint() 使用
  • columns:多少個柵欄
  • gutters:流變溝槽是 columns 的倍數,也可以是靜態單位 px
  • spread:擴散元素的溝槽,narrow (沒有), wide (兩側:0.5 + 0.5 = 1), or wider (兩側 1 + 1 = 2)
  • container-spread:擴散 container 的溝槽,同 spread

 

建議的簡單組合

為了方便巢狀 span() 的計算,spread 與 container-spread 使用官方預設就好。我們習慣在螢幕邊框兩側,加入 gutter() 可以方便手指滑動。

  • spread: narrow
  • container-spread: narrow

spread 與 column 數量的關係(參考官方說明),在算總體寬度的時候可以注意一下,看自己希望怎麼使用:

  • narrow:gutters = columns – 1
    • 兩側沒有 gutter 所以 4 個柵欄會有 0 + 3 + 0 個溝槽
  • wide:gutters 等於 columns
    • 兩側各 0.5 單位溝槽,所以 4 個柵欄會有 0.5 + 3 + 0.5 個溝槽
  • wider:gutters = columns + 1
    • 兩側各 1 單位溝槽,所以 4 個溝槽會有 1 + 3 + 1 個溝槽

若要重複 12 個 5 柵欄

前後各 20px 柵欄,中間重複 3 個 100px 柵欄

 

自動處理 Span 對齊

SUSY3 之前,都有 @include @span() 自動對其格線左右兩側 (其實就是 float: left | right),不過在 3 拿掉了,這是因為現在有了 flexbox 與更新的 grid 屬性可以選用, float 排版不再是首選。當然 float 這個老方法的支援度最全面,若你跟我一樣偏好 float 的話,那我們參考官方建議自訂一個 @mixin span()

這樣我們使用 @include span(4); 或 @include span(4 last); 就可以做到 float: left 與 float: right 的效果了。

斷點設計

參考官方教學,添加以下兩個自訂的 with-layoutsusy-breakpoint 即可快速的在不同尺寸底下使用不同的柵欄。例如 Div 在 Mobile 底下佔 2 欄位,但在 Pad 底下站 4 個欄位。

接著添加三個裝置的名稱設定,你可以依照需求增減。其中透過 min-width 指定斷點,例如 $pad 會作用在 0~799px 之間。

所以 container 可以這麼寫 (參考),這樣就能產生不同尺寸縮放的背景柵欄,很適合開發階段使用。

元素可以這麼寫

我們來看範例,背景 0-799px 紅色,800-1279px 綠色,1279px 以上藍色。

 

Gallery

susy2 有好用的 gallery ,但在 3 拿掉了,官方希望你有需要再手動加入

之後,我們要顯示例如相簿,這種每一行左右貼其兩側的話,就非常簡單只要這樣就可以

Comments

發表迴響