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

使用 Susy 的第一步就是建立容器。我們的容器在這個(gè)示例中就是?.container。

.container {
  @include container;
}

我們知道，這個(gè)容器中將會(huì)存在浮動(dòng)元素，所以這里需要添加一個(gè)?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ù)前面的視圖，可以將整個(gè)容器劃分為十列，其中?AG 1?和?AG 3各占兩列，AG 2?占用剩余的六列。由于?AG 2?內(nèi)還包含了多個(gè)布局，所以這里需要一個(gè)?clearfix。

.ag1 {
  @include span(2 of 10);
}
.ag2 {
  @include span(6 of 10);
  @include clearfix; 
}
.ag3 {
  @include span(2 of 10 last);
}

如果此時(shí)查看輸出效果，應(yīng)該就會(huì)像下面這樣：

AG 4?和?AG 5?嵌套在?AG 2?中，而且每個(gè)元素具有三列的寬度：

.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?具有四列的寬度，同時(shí)?AG 7?還是該行的最后一個(gè)元素，那么你就需要這么來(lái)做了：

.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);
}

簡(jiǎn)而言之，這就是使用 Susy 2 的完整過(guò)程——難以置信的靈活和便利。

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