使用 Susy 2 创建 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 1AG 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);
}

如果此时查看输出效果,应该就会像下面这样:

Susy

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 已经布局成功了。

Susy

接下里,AG 6 具有两列的宽度,AG 7 具有四列的宽度,同时 AG 7 还是该行的最后一个元素,那么你就需要这么来做了:

.ag6 {
  @include span(2 of 6);
}
.ag7 {
  @include span(4 of 6 last);
  @include clearfix;
}

Susy

最后,让我们完成剩余元素的布局:

.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

简而言之,这就是使用 Susy 2 的完整过程——难以置信的灵活和便利。

本文根据@Zell的《A Complete Tutorial to Susy 2》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://www.zell-weekeat.com/susy2-tutorial/

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部