好用的 Responsive grids : SUSY 實作感想

相信大家都看過這張流傳已久的 compass 武裝神圖:

而我在接觸 SUSY 這個 專門給 Compass 用的 Responsive grids framework 之後,我深深認為 SUSY 加上 Compass 的合體會變成:
(本來想把圖做的精美一點的,可是 ubuntu 沒有 photoshop 可以用,所以就算了 OTL)

是的,你沒看錯,就是復仇者聯盟!為什麼我會給 SUSY 那麼高的評價呢?還變成了超強的復仇者聯盟,搞毛阿!!
但我真的覺得 SUSY 實在是無敵噁心好用,以下跟大家分享我覺得他好用的點:

  • 簡潔:如果你有看他們的官方文件,會發現所有語法只有該死的一頁,就沒了。
  • 靈活度非常高:假設你曾用過 Twitter Bootstrap,應該可以理解 Bootstrap 他們設計的 grid 其實都寫死,你只能用他們寫好的框架套用,然後在 class 命名還要寫上一堆噁心又令人發毛的col-lg-1, col-lg-2, col-lg-8 這到底是什麼啦(翻桌。
    但 SUSY 他只提供語法,因此你可以自由命名 class,然後在這些 class 裡插入他的語法就好了。

以上,雖然只有簡單的兩個特點,但這就是我使用 grid system 最在意的部份啦!所以我果斷跳坑開始玩 SUSY,連公司網站,還有自己的網站也歡樂的用 SUSY :D

利用 SUSY 實作了幾個小東西,雖然功力還沒有很高深,但有些實作心得想跟大家分享(順便做個筆記)。

這篇不是教學,所以我假設你已經會 SUSY,或是已知道怎麼使用 SUSY 唷
(想更了解 SUSY 歡迎參考 Even Wu 在 coscup 的演講:RWD 一小時就上手)

用 SUSY 實現 960 grid

關於 SUSY 的基本設定,大家應該都看到爛掉了,如果你到官方網站找資料,會發現他提供的基本設定如下:

$total-columns : 12;
$column-width  : 4em;
$gutter-width  : 1em;
$grid-padding  : $gutter-width;

但這樣做出來的 gird 並不是 960 grid。

所幸像我前面提到的, SUSY 的靈活度真的超強大,他可以自己設定你的 grid 總寬,還有任何細節(像是 column , gutter 的寬度..等),所以如果你要設定網頁是 960 grid,你可以這樣寫:

$total-columns : 12;
$column-width  : 60px;
$gutter-width  : 20px;
$grid-padding  : 10px;

這個也是官方提供的 960 grid 設定參考,簡單來說,公式為:
總寬 = ($column-width + $gutter-width) * $total-columns
960px = (60px + 20px) * 12
(修正版,感謝 taiansu 提供)
總寬 = column-width x total-column + gutter-width x (total-column -1 ) + grid-padding x 2
960px = 60 x 12 + 20 x (12-1) + 2 x 10
所以,如果你想要改成 24 grids & 960px,就拿上面這公式自己重新排一下吧!

想更加了解這四個設定分別代表甚麼的話,同樣請參考 Even Wu 製作的 SUSY 圖解 (感謝 Even 熱情贊助,高清版的喔)

mobile first? desktop first?

揪~竟在寫 RWD 的時候,要從手機版先做起?還是從桌面版先做起呢? 其實這樣的討論有點像是下圖所示:

圖片取自: Brad frost web

Graceful Degradation(優雅降級),以及 Progressive Enhancement (漸進增強) 這兩個大觀念是在開發前就要先討論好的認知,但如果要講這兩個東西,可能會把主題擴得有點大,所以有興趣想了解的朋友,可以參考這篇文章:認識優雅降級與漸進增強 ,然後我們把主題拉回來。

其實先做手機版,或是先做桌面版沒有一定的對錯,但就我所知:

  • 國外開發幾乎都是 mobile first
  • SUSY 的架構適用 mobile first
  • 我也不會寫 desktop first

所以我自己也是用 mobile first 啦!剛剛試做了一下,把寫好的一個小東西改成用 desktop first 的方式,整個人就轉的有點七葷八素了,因為包含元件在breakpoint的設定要重新調整,CSS 讀取的順序也要修正過,所以我放棄了。

mobile first 在 SUSY 的實作很簡單,一開始先把「手機版」以及「所有共通的元件」先做完,再利用 at-breakpoint 設定斷點,做 desktop 版(或 pad 版)慢慢調位置。但嚴格說起來,這也不能叫作「手機版」,因為如果你沒設定 breakpoint 斷點的話,其實不管視窗大小,所有元件的排列位置是一樣的,差別只在於縮放視窗,grid 會自適應寬度。

也就是說,mobile first (Progressive Enhancement 漸進增強) 這樣的概念是「先求相容於各大平台」,再求「針對平台做不同的元件排列」,就是先求有再求好,這樣即使來不及把 desktop 的版本做完,在 review 的時候也不會在其他平台上閱讀困難。

但我知道台灣很多開發方式都是 desktop first,像我公司的網站目前不做手機版所以也是 desktop first,害我邊做邊煩惱以後如果老闆心血來潮要做 mobile 我該怎麼快速達成。anyway, desktop first 我還是有機會做到的(如果我要把現在這個部落格加上 media query 的話…) ,所以到時候 desktop first 有心得再跟大家分享囉。

CSS 讀取順序很重要

任何檔案的讀取順序都是由上至下、由左至右,這點在 susy (或說 media query) 的設定上也是發揮的淋漓盡致。
如果你只做 mobile 以及 desktop 版本,那你只要設一個 breakpoint,所以你不會發現有問題;
但如果你要同時做 mobile, pad, 以及 desktop 版本,要設兩個 breakpoint 時,讀取的順序就很重要了。

簡單來說,你寫 CSS 的時候,順序一定要是:
▼ mobile
▼ pad
▂ desktop

假使你順序寫成:
▼ mobile
▼ desktop
▂ pad

你會發現不管你怎麼拖拉視窗,desktop 的 css 永遠不會出現。那是因為 CSS 讀完了 desktop 之後,才讀 pad,所以他會把 pad 的設定蓋過 desktop。

換成 susy 語法可能比較有 FU,如果順序是 mobile > desktop > pad 。然後你把這段語法丟進去跑,會發現不管怎麼移動視窗,.logomargin永遠是 100px。

//desktop
@include at-breakpoint(960px 12) {
  .logo {
    margin-left: 0;
  }
}

//pad
@include at-breakpoint(768px 12) {
  .logo {
    margin-left: 100px;
  }
}

因為 susy 並沒有那麼聰明,不是你下了一個 $desktop 給他,他就知道裏面這一段是針對桌面版;寫了一個 $pad,裏面就是針對平版。
前面有提到 susy 的靈活度很高,他所有的設定就是你怎麼寫,他怎麼吐,所以上面這一段 compile 後的 CSS 是:

/* desktop */
@media (min-width: 960px) {
  .logo {
    margin-left: 0;
  }
}

/* pad */
@media (min-width: 768px) {
  .logo {
    margin-left: 100px;
  }
}

這樣應該懂了吧,在同樣符合min-width情況下,最下面的 css 權重可是比上面的還高喔。

如果不想動順序,也可以把min-widthmax-width通通補滿,這樣就不會同時有兩個設定衝到,但我覺得這樣比較麻煩,還是把順序調整好方便多了。

我的 SUSY 實作

最後跟大家分享我做的 simple SUSY,順便搶先看未來 http://blog.mukispace.com 的新佈景主題(笑)。 ► MUKI space* SUSY 範例實作

本來想過把半成品放出來,會不會被偷走或是抄襲的 issue,但轉而想想,反正個人網站現在也不流行了,會懷舊的大概也只剩我們有做過個人網站的老人,而如果還活躍於網路界的話,早就功力高深到不屑抄襲了 XD。另外,反正我也才做一頁,裏面所有東西都還會再調整,抄這應該一點意義都沒有。因此想參考原始檔的朋友,可以到我的 github 下載參考

我的中斷點有設 mobile, pad, 以及 desktop,但是 pad 版目前沒有想到要特別去排其他元素,所以長相就跟 mobile 一樣囉。另外我有把 grid 打開,歡迎大家拖拉玩一玩。

最後不得不說,SUSY 真的是一個好玩又容易上手的東西,歡迎大家跟我一起果斷跳坑 :D

You may also like...

19 Responses

  1. taiansu 說道:

    Thanks for share. 順帶一提我覺得960那個公式應該是 column-width * total-column + gutter-width * (total-column -1 ) + 2 * grid-padding: 60 * 12 + 20 * 11 + 2 * 10.

  2. oberon 說道:

    感謝妳的分享,剛好一直在想花時間去碰蘇西,但每次看到要用計算的方式就會有點害怕,這篇文章寫的非常清楚,又燃起我想再去碰她的動力!

    • muki 說道:

      阿阿~其實我也只寫大方向而已,到沒有很清楚的做什麼語法解說教學,不過有問題都歡迎互相交流唷!
      Even 也有在 FB 開一個 susy 研究社團,有問題都可以到裏面問 ^^
      https://www.facebook.com/groups/susy.temple/

    • J-Hong 說道:

      感謝妳的分享,
      可惜研究社團「你點擊進來的連結可能發生故障,或該專頁可能早被移除了。」
      搜尋好像也沒有相關的

    • muki 說道:

      Even 他後來把社團改成私密了,所以搜尋不到了 OTL

  3. QQQQ羊 說道:

    您好,可否提供範例實作未編譯的susy呢? 想研究研究! 謝謝您

    • muki 說道:

      哈囉你好
      我之前有放,不知道為什麼不見了,謝謝回報歐
      原始檔案可以參考:https://github.com/mukiwu/mukispace-susy-example

  4. QQQQ羊 說道:

    你好,想請教您一個問題,如果當我網站已用Bootstrap做好響應式設計,當老闆叫我要改回可切換手機版/電腦版網頁時,該如何下手?工程是不是很耗大?是不是就等於重做了? 謝謝回覆!

  5. 哈利 說道:

    您好 想請問您susy2斷點 要另外@import breakpoint嗎?還是它本身就會有自設斷點的功能?非常非常謝謝您

  6. jive 說道:

    我之前是bootstrap grid 的使用者,我覺得版主說的"應該可以理解 Bootstrap 他們設計的 grid 其實都寫死,你只能用他們寫好的框架套用",其實我過去的使用經驗沒有這個困擾,因為Bootstrap他們也有提供Grid Mixins讓我將柵格樣式寫在自訂義的Class中,如果要改他們的柵格數量還什麼的其實也滿方便的,因為我都是直接改bootstrap的原始檔。

    後來也有開始用Susy,但不知道為什麼,我還是比較喜歡用bootstrap,不知道是我已經把bootstrap用到突破了bootstrap框架了?還是我Susy還不太了解(雖然我是很確實的看過Susy每一個Mixins文件),但其實我覺得如果會用bootstrap 的Mixins的話,我覺得比Susy還更簡潔。

    以我要針對不同裝置、同一個柵格為例:
    在bootstrap 的mixins
    .wrap{
    @include make-xs-column(4);
    @include make-sm-column(8);
    @include make-md-column(12);
    @include make-lg-column(16);
    }
    其他還有許多的mixins…如果仔細看bootstrap mixins原檔,會發現其實bootstrap做得真的很不錯喔~

  7. KYO 說道:

    把這段加到之前就可以在手機上變成電腦版.
    用JQ或是判定加入cookies or session就可以了

  1. 2013.08.13

    […] 好用的 Responsive grids : SUSY 實作感想 « MUKI space* […]

  2. 2013.10.27

    […] 教學的部分,非常推薦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/ […]

  3. 2014.02.02

    […] 好用的 Responsive grids : SUSY 實作感想 – Muki:大推薦~詳細又易懂喔! […]

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>