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 和 Vertical Rhythms 工具。

简单安装：

# 终端命令

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的时候，有时也会编译出错，这个问题仍待解决。这个问题应该不是个问题，由于我重启电脑以后就没有再出现过。