影片教學請點選下圖連結↓

以下文章同步於Github。

由於我們即將要來介紹如何透過susy2來設計responsive grid，
在那之前我想先花一章篇幅來講一下breakpoint這個framework，
因為susy2的responsive mixin是透過他來設計的，
所以有必要了解一下他的原理，
你才知道該如何透過他來設計你想要的grid出來。

程式碼連結
Breakpoint
sassmeister-breakpoint

我們先到Breakpoint的官網，
其中一個範例如下：

$high-tide: 500px;
.johnny-utah {
  @include breakpoint($high-tide) {
    content: 'Whoa.';
  }
}
//編譯出的CSS
@media (min-width: 500px) {
  .johnny-utah {
    content: 'Whoa.';
  }
}

Breakpoint就是一個Mixin，
他可以讓你透過設定變數，
再藉由他的Mixin來編譯出media Queries 語法，
所以如果你有幾個斷點，
就設計幾個變數，

Breakpoint預設是mobile first的設定，
所以你可以看他編譯出來是min-width: 500px 也就是先從手機開始做起，

如果你今天要設計一個mobile first的responsive網站的話，
其設計方式如下：

$pad: 569px;
$pc: 1024px;
.container{
  width:300px;
  height:300px;
  margin: 0 auto;
  background: orange;
  @include breakpoint($pad){
    background: black;
  }
  @include breakpoint($pc){
    background: blue;
  }
}

首先我一開始寫的設定自然就是先撰寫手機的CSS設定，
再來當螢幕解析大於569px後，
就開啟該media Queries的設定，
當有兩個class設定一樣時，
後面的程式碼會覆蓋掉前面的設定，
藉由這樣的方式來設計響應式網站，

所以如果是做mobile first網站，
你就可以看出你的數值一定是從小慢慢慢變大，
再一一去覆蓋。

而假使你要設計的responsive網頁版型是desktop first的話，
那就必須用max-width的設定。
如果是用Breakpoint的話，
變數設定則會是：

$pad2: max-width 767px;
.conetent{
  width:100px;
  @include breakpoint($pad2){
    width:200px;
  }
}
//編譯出來的CSS
.conetent {
  width: 100px;
}
@media (max-width: 767px) {
  .conetent {
    width: 200px;
  }
}

假使你的斷點是介於多少到多少之間的話，
變數則是設定$mobile: 600px 800px;，
這樣編譯出來就會變成@media (min-width: 600px) and (max-width: 800px) {}。
看到這裡，
你就已經曉得Breakpoint主要是拿來協助我們寫RWD斷點的Mixin，
所以susy2 的 RWD Mixin也有結合他的東西來設計。

如果你設計的網頁版型不想用類似susy2 的framework，
也可以考慮看看單純使用Breakpoint的Breakpoint的工具，
要設計幾個斷線就設計幾個變數即可，
透過變數來進行統一管理也非常方便嘍。