使用 Susy 2 創(chuàng)建 AG 柵格

使用 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?創(chuàng)建布局。根據(jù)前面的視圖，可以將整個容器劃分為十列，其中?AG 1?和?AG 3各占兩列，AG 2?占用剩余的六列。由于?AG 2?內(nèi)還包含了多個布局，所以這里需要一個?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;
}

干的漂亮，現(xiàn)在?AG 4?和?AG 5?已經(jīng)布局成功了。

接下里，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 的完整過程——難以置信的靈活和便利。

本文根據(jù)@Zell的《A Complete Tutorial to Susy 2》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處：http://www.zell-weekeat.com/susy2-tutorial/。