在使用 Susy 2 創建柵格前，讓我們先來了解一些非常重要的混合宏和函數。如果你理解了這些，那么就一定可以使用 Susy 來創建任何任何柵格。
### container 混合宏
要想運用 Susy 魔幻般的計算力量，第一件需要做的事就是定義?`container`。
~~~
// The Container Mixin
@include container( [<length>] );
// Note: Optional arguments are enclosed in []
~~~
`container`?混合宏擁有一個可選的長度參數，用來設置最外層容器的最大寬度。如果該參數缺失，默認使用?`max-width:100%`來代替。
如果你要使用固定寬度的柵格布局，那么可以使用 Susy 自動計算最大寬度。
為了保證 Susy 的有效計算，請將這個參數保持空缺：
~~~
@include container;
~~~
### Span (Mixin)
spay 混合宏是 Susy 進行布局的核心元素，[它讓柵格表現的極其靈活](http://susydocs.oddbird.net/en/latest/toolkit/#span-mixin)。
我通常按照 Susy 的官方方式實現自己的布局：
~~~
@include span( <width> [<wide / wider>] of <layout> [<last>] );
~~~
如果使用過 Susy 1，那么就會發現它非常類似?`span-column`?混合宏，兩者只有極少的差異。
下面我來詳細解釋下其中的參數：
* `<width>`?表示該元素布局的列數。
* `[<wide / wider>]`?是一個可選參數，允許你擴展當前的列寬，以增加一邊或兩邊的間距。
* `<layout>`?是容器的上下文環境，需要其他定義當前布局的可選參數配合使用（上下文環境表示的是父級容器的列數）。
* `[<last>]`?是一個可選參數，用來通知 Susy 該元素為一行的最后一個元素。
下面是一個具體的例子：
~~~
// This has a width of 3 columns + 1 gutter, out of 9 columns and is supposed to be the last item within the context.
.some-selector {
@include span(3 wide of 9 last);
}
~~~
### Span (Function)
`span`?函數非常類似?`span`?混合宏，唯一不同的一點在于該函數只返回元素的寬度。在這個函數中只能使用?`<width>`,`<wide/ wider>`?和?`<layout>`?參數。
~~~
// This has a width of 3 columns out of 9 columns
.some-selector {
width: span(3 of 9);
}
~~~
使用?`span`?函數，讓所有的工作輕松多了，無需再去記憶各種外邊距內邊距之類的細節問題。使用它，你就能得到恰當的寬度。
~~~
// This has a padding of 1 column out of 9 columns
.some-selector {
padding-left: span(1 of 9);
}
~~~
### Gutter 函數
`gutter`?函數只有一個參數——?`context`（上下文環境）。
~~~
// This outputs margin that equals to 1 gutter width in a 9 column layout
.some-selector {
margin-right: gutter(9);
}
~~~
上述就是使用 Susy 2 必須要掌握的核心功能。
