susy 学习之进阶

由于现在对susy的教程有限，只有官网指南性质的文档，然后就是w3cplus对她的翻译，所以我从零安装susy并调试项目到与从github上克隆susy项目同时进行，主要是为了参考susy放在git上的书写方式以及demo。然后参考了http://susy.oddbird.net/，查看了一些官网推荐的用susy写的外文网站，这一举措在研究探索susy的过程中，给我点亮了一盏明灯，让我看到susy在布局方面简洁而有力的 布局能力，让我在知其难而知其优雅的同时能够奋力前行。

　　好了，开始吧。

Susy 是一款优秀的辅助工具，可以让开发者更得心应手地实现各式栅格布局。

官方发布 Susy 2 已经有些时间了，如果你很喜欢 Susy 1，那么相信你也一定会爱上 Susy 2——新版本的配置和使用更加灵活而富有弹性。

为什么选择 Susy?

正如上文所述，Susy 是极佳的辅助工具，可以用来创建各种天马行空的布局设计，而又无需考虑其中的数学问题（译者注：流式布局的百分比计算需要大量的数学计算）。Susy 的魅力之处就在于，它所实现的 CSS 样式是与 HTML 文件完全分离的。

如果你之前使用过传统的栅格框架，比如说 Foundation 和 Bootstrap，那么你就应该了解，它们所创造的栅格都是既定的宽度值和断点。更进一步地说，如果你想要改变布局，那么必须添加相应的类名到 HTML 文件中。

Susy 将这些既定样式统统抛弃了，你可以在任何 CSS 类型上实现栅格布局。

快速入门

Sass 是 Susy 唯一需要依赖的环境，所以必须安装 Sass。

同时，Susy 的设计初衷是作为 Compass 平台的一部分，所以，建议使用 Compass。

此外，也建议配合使用 Breakpoint 和 VerticalRhythms 工具。

简单安装：

# 终端命令

compass create —using susy <project name>

或者，使用终端命令在相关项目中使用 Susy：

compass install susy

通过命令行安装的susy，她的安装目录同

我们也可以从git上克隆https://github.com/ericam/susy.git

Grunt配置

// Gruntfile.js
sass: {
  dist: {
    options: {
      style: ‘expanded’,
      require: ‘susy’
    },
    files: {
        ‘css/style.css’: ‘scss/style.scss’
    }
  }
}

快速上手

在scss中导入susy

通过终端命令初始化项目后的导入方式

通过git上克隆susy后的导入方式

Susy 最基础的布局

Susy 最基础的布局有两个简单的混合宏组成：

// 建立一个布局上下文
@include container;
// 为元素设置布局效果
@include span(<width>);

举例

body {
  @include container(960px);
}
nav {
  @include span(4 of 12);
}

n如果你想为栅格内嵌的元素设置布局效果，那么可以使用 span 混合宏计算列宽：

n nav { @include span(3 of 12); }

这么一条语句就实现了，神奇吧，完全不需要考虑背后的计算。Susy 会帮你做相关的数学计算，所以你可以天马行空地去布局。

遇到的坑：

　　　1，在修改$susy布局配置中的columns（原先为4改为5），compass编译出错，在恢复5至4的时候，有时也会编译出错，这个问题仍待解决。这个问题应该不是个问题，因为我重启电脑之后就没有再出现过。