這一次我想聊的是關於susy所提供的grid種類，
因為他不單單只能設計RWD版型而已，
一些常見的網頁版型設定也都有支援提供，
後面如果有時間的話也會設計一個susy的版型，
讓大家可以針對susy能夠更加地了解^_^

The Magic Grid

//Sass程式碼
$total-columns: 12 // 12 columns
$column-width: 4em // columns are 4em wide
$gutter-width: 1em // with 1em gutters
$grid-padding: 1em // and 1em padding on the grid container

.container
  +container

//編譯出來後，得到下面的結果

.container {
  *zoom: 1;
  max-width: 59em;　// 重要處
  _width: 59em;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto;
  height: 500px;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}

你可以發現到說，
susy magic grid他是以max-width的方式來進行版型設定，
max-width的設定是，
今天你今天在一個元素上寫了max-width：400px後，
他最大寬度就只會是400px，
但如果你縮小螢幕到400以下，
該元素也會自適應來去做縮放。
如果你要設定Responsive的版型時，
絕大部分的網頁設計師也會建議你的圖片要設定為
max-width: 100%;height:auto，
這樣你的圖片在螢幕縮小時也可自適應縮放。
The Static Grid
如果你今天並不是要做responsive的版型，
那你也可以試試看susy的Static設定，
你可以使用susy預設的變數功能來調整：

//Sass程式碼
$total-columns: 12
$column-width: 4em
$gutter-width: 1em
$grid-padding: 1em
$container-style: static //設定處

.container
  +container


//編譯出來後，得到下面的結果
.container {
  *zoom: 1;
  width: 59em;  // 變成width而非max-width
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto;
  height: 500px;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}

使用Static的固定寬度版型，
你會發現width的設定會從max-width變成width，
今天你就算拖拉螢幕解析度時，
瀏覽器下方就會出現卷軸，
畫面也不會跟著自適應縮放。

再來如果要做滿版的網頁設計：

$total-columns: 12
$column-width: 4em
$gutter-width: 1em
$grid-padding: 1em
$container-style: fluid //修改處

你希望保有960的grid，
但又希望設定更大的解析度的話：

$total-columns: 12
$column-width: 4em
$gutter-width: 1em
$grid-padding: 1em
$container-width: 1140px //直接設定網頁整體寬度，不透過grid的欄位數量來設定

我自己比較常使用的設定也是magic的版型：

$total-columns: 5
$column-width: 6em
$gutter-width: 1em
$grid-padding: 1em
$pad: 767px 8  //代入at-breakpoint來設定螢幕解析度區間與欄位寬度
$pc : 960px 12 //代入at-breakpoint來設定螢幕解析度區間與欄位寬度
.container 
	+set-container-width
	+susy-grid-background
	margin: 0 auto
	+at-breakpoint($pad)
		+container
	+at-breakpoint($pc)
		+container

綜上所述，
透過susy具有彈性且易於維護的grid設定，
你就可以去發想該如何透過它來去設計更有趣的版型，
enjoy it！

今天介紹的語法：
$container-width: 1140px //直接設定網頁總寬度
$container-style //設定版型樣式，有fluid(流體)、Static(固定版型非RWD)、Magic(寬度有max-width效果)

另也附上影片流程提供延伸學習：