使用 Susy 的第一步就是建立容器。我們的容器在這個示例中就是?`.container`。
~~~
.container {
@include container;
}
~~~
我們知道，這個容器中將會存在浮動元素，所以這里需要添加一個?`clearfix`。
~~~
.container {
// This is the default clearfix from Compass. You can opt to use other clearfix methods
@include clearfix;
}
~~~
首先，我們需要為?`AG 1`,?`AG 2`?和?`AG 3`?創建布局。根據前面的視圖，可以將整個容器劃分為十列，其中?`AG 1`?和?`AG 3`各占兩列，`AG 2`?占用剩余的六列。由于?`AG 2`?內還包含了多個布局，所以這里需要一個?`clearfix`。
~~~
.ag1 {
@include span(2 of 10);
}
.ag2 {
@include span(6 of 10);
@include clearfix;
}
.ag3 {
@include span(2 of 10 last);
}
~~~
如果此時查看輸出效果，應該就會像下面這樣：
`AG 4`?和?`AG 5`?嵌套在?`AG 2`?中，而且每個元素具有三列的寬度：
~~~
.ag4 {
@include span(3 of 6);
}
.ag5 {
@include span(3 of 6 last);
}
//Alternatively, you can make use of the last mixin and write it this way. The last mixin just changes that element to be the last in the row.
.ag4,.ag5 {
@include span(3 of 6);
}
.ag5 {
@include last;
}
~~~
干的漂亮，現在?`AG 4`?和?`AG 5`?已經布局成功了。
接下里，`AG 6`?具有兩列的寬度，`AG 7`?具有四列的寬度，同時?`AG 7`?還是該行的最后一個元素，那么你就需要這么來做了：
~~~
.ag6 {
@include span(2 of 6);
}
.ag7 {
@include span(4 of 6 last);
@include clearfix;
}
~~~
最后，讓我們完成剩余元素的布局：
~~~
.ag8 {
@include span(2 of 4);
}
.ag9 {
@include span(2 of 4 last);
}
.ag10 {
clear: both;
// Alternatively, you can now use the span mixin with the full keyword to tell Susy this should be a 100% width
// @include span(full);
}
~~~
簡而言之，這就是使用 Susy 2 的完整過程——難以置信的靈活和便利。
> 本文根據[@Zell](http://www.zell-weekeat.com/about/)的《[A Complete Tutorial to Susy 2](http://www.zell-weekeat.com/susy2-tutorial/)》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處：[http://www.zell-weekeat.com/susy2-tutorial/](http://www.zell-weekeat.com/susy2-tutorial/)。
