1分钟部署网站📞AI智能客服,大模型训练自有数据,简单好用,有效降低客服成本 广告
使用 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); } ~~~ 如果此时查看输出效果,应该就会像下面这样: ![Susy](https://box.kancloud.cn/2015-07-31_55bb6227c4d86.png "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](https://box.kancloud.cn/2015-07-31_55bb62280fcc0.png "Susy") 接下里,`AG 6` 具有两列的宽度,`AG 7` 具有四列的宽度,同时 `AG 7` 还是该行的最后一个元素,那么你就需要这么来做了: ~~~ .ag6 { @include span(2 of 6); } .ag7 { @include span(4 of 6 last); @include clearfix; } ~~~ ![Susy](https://box.kancloud.cn/2015-07-31_55bb62286cd5c.png "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](https://box.kancloud.cn/2015-07-31_55bb6228a5f48.png "Susy") 简而言之,这就是使用 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/)。