以下文章同步於Github。

susy1到susy2又是一個可怕的里程碑，
原本覺得susy1已經很強大了，
但在susy2面前，susy1就像是玩具一樣，
首先我們就先從他的變數設定來一一說起吧，

範例程式碼
susy2 settings
sassmeister範例

環境建置
Sass 3.3以上
Compass
Breakpoint
如果你不想安裝ruby環境，Fire.app可以直接撰寫Sass與Susy2

susy2 settings
在看susy2的變數設定前， 我們再回頭看一下susy1的設定：

@import "susy";
@import "susyone";
$total-columns : 12;    // 欄數
$column-width  : 60px;  // 欄寬
$gutter-width  : 20px;  // 欄與欄之間的距離
$grid-padding  : $gutter-width/2; // grid左右邊的外間距
.container{
  @include container    // max-width: 940px; padding-left: 10px;padding-right: 10px;
}

在以前用susy1設計grid的時候， 輸入變數後，使用他的container mixin就會自動幫你加總他的寬度。 欄與欄之間則是用margin-right來推gutter。

官網介紹的susy2簡易版設定如下：

$susy: (
  columns: 12,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: inside,
);

columns與gutters在susy1就已經有其概念了， 這裡我主要先要來講gutter-position的屬性，

gutter-position的各種功能

before：推左外間距(margin-left)
after ：推右外間距，同susy1(margin-right)
split ：左右外間距各推gutter的一半，同960grid
inside：推欄的左右內距(padding-left、padding-right)
inside-static ：用inside會用%來推padding，這則是以單位來推，例：px、em，看你的column-width是用什麼單位

透過gutter-position，我們就能依照自己的開發習慣，來編譯出自己開發習慣的gutter出來。

如何設計你要的Grid總寬度
1.你可直接在css上面寫

.wrap{ @include container(960px) }

2.或者是透過變數自動編譯為：

$susy: (
    columns: 12,
    gutters: 1/3,      //只能用幾分之幾，不能用單位
    column-width:60px, //預設是false，但要透過susy2自動計算出總寬此變數必加
    math: fluid,       //使用fluid的話，所有編譯出來的單位都是%，但使用[static]再配合column-width則就會變成px、em
    output: float,
    gutter-position: after,
);
.wrap{
    @include container;
}