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

以下文章同步於Github。

上個章節講了susy2的簡易設定方式， 接著我們來看它預設的全域設定，
susy2 global-defaults

Global Defaults

$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 4,
  gutters: .25,
  column-width: false,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

只要你載入了susy2以後， 上面的Global Defaults就會自動載入， 接著我再來針對一些我個人常用的設定來進行解說
flow
預設：ltr
選項：ltr、rtl
susy2預設是用float:left從左到右來排列Grid，
而susy1也是一樣，
如果你希望你的欄是從右邊排到左邊， 再把設定改為rtl即可。

container
預設：auto
選項：可自行設定grid的寬度，例：960px、60em
container可以直接寫Grid的總寬度進去，
他會依照你columns與gutters的設定，
自動算出數值， 所以如果你不想要透過column-width來算出總寬的話，
那也可以使用container的功能。

container-position
預設：center
選項：left、center、 right、 <length>
預設是center，也就是讓你的Grid水平置中，
left、right則是可讓你的Grid靠左或靠右對齊，
而length則是自己寫一個自訂數值，
這樣你的margin-left、與margin-right則會改為你的數值。

global-box-sizing
預設：content-box
選項：content-box、border-box

這個這跟盒模型(Box Model)有關，
這個設定有點奇怪，
不曉得是不是我設定錯了還是怎樣，
所以我弄不起來，
這個設定我是自己用CSS寫的，

但這裡的原理我個人認為還蠻重要的，
這跟盒模型(Box Model)有關， 瀏覽器預設都是content-box的設定， 也就是如果你今天有個div設定寬50px後， 但又下了padding-left:10px與padding-right:10px後
該div會變成70px，
所以有些設計師在使用Grid的時候，
因為不懂content-box的原理，
導致欄變寬，就變成不是依照比例去排，
例如下圖都是一欄的寬度，

但如果在黑色的div推擠了左右padding，就不符比例，

這問題在以前也相當困擾網頁設計師，
直到CSS3多了box-sizing的語法，
在susy2的文件也有介紹到，
他提到如果你的網頁只要兼容到IE8以上，
建議你可以在reset.css上加上這行，

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

這樣子你的盒模型只要設定一個寬度，
不管你是用padding或border，
他的寬度就都不會受到影響了。

我自己是都習慣用box-size: border-box了，
但如果你的客源都還是必須兼容ie7以下，
那就沒辦法使用這個設定了。

last-flow
預設：to
選項：to、from
預設是to的情況下， 寫了下面的語法，
.content就會變成與float:right，
如果改成from的話，則會變成float:left， 如果你的gutter-position設定成after或before的話，
那就可能有機會會改到這個設定，
PS：這裡的last就等於susy1的omega

.conetne{
  @include span(1 last)
}

use-custom clearfix
預設：false
選項：true、false

susy2會自動抓取compass預設的clearfix的mixin，
但如果你不希望susy2使用compass的clearfix，
你可以在這設定寫true後，
自己寫一個名稱為clearfix的mixin， susy2會優先抓取你的mixin設定

下一章節會再來針對debug模式，
搭配compass vertical rhythm來做詳細的解說。