Susy 是一个用于创建自定义布局结构的 css 工具集合，它并不提供现成的 className 来给你使用，而是提供 sass 的 function/mixins 来帮助你创建页面的布局结构。
Susy 作为一个 sass 工具库，使用的时候 @import 进来便是，可以使用 npm/bower 来下载。
Susy 提供了多种方法来进行配置，可以使用 sass 的 map 结构，或者使用简单的缩写（类似函数传参）。
$susy: (
column: 10,
gutters: 1/5,
);
$shorthand: 10 1/5;本身 Susy 是提供了默认的配置的，参考 Susy default settings。
我们来看下每个配置项的作用：
-
flow [ rtl | ltr ]
文档流的方向，最直接的影响便是
float: right | left。默认值是left -
math [ fluid | static ]
使用百分比或者指定的长度单位。 fluid 的话，相对于容器的百分比，如果是 static 的话，会以 column-width 的设置来计算，假设 column-width 是
4em，那么便以 em 为长度单位。 -
output [ float | isolate ]
这个基本都是 float 了，想要了解更多，请点击 sub-pixel rounding
-
container [ length | auto ]
容器元素的最大宽度，auto 的话则使用 100%。
-
container-position [ left | center | right | length [*2] ]
容器元素的位置，每一个的影响简单如下：
margin-left: 0; margin-right: auto; // left margin-left: auto; margin-right: 0; // center margin-left: auto; margin-right: 0; // right margin-left: length; margin-right: length | length2 -
Columns [ number | list ]
布局的行数，如果是一个数字，则均分，如果是一个列表，则除以总和后按照各自权重计算。
// columns: (1 2 3 4) .box1 { @include span(1) } // width: 10% .box2 { @include span(3) } // width: 60%
-
gutters [ ratio ]
单元格之间的间隔，相对于每一列的宽度（注意 width 的计算方式，随着 box-sizing 的值不一样输出也会不一样，切记是相对于内容宽度，而非是元素宽度）
// columns: 10 // gutters: 1/4 // border-box .box { @include span(1) } // width: 10%; padding-left: 1%; padding-right: 1%;
-
column-width [ length | false | null ]
列的宽度，当 math 为 fluid 时，这个值为单元格的最大宽度，当 math 为 static 时，这个值为单元格的宽度。fluid 布局时这个设置不一定需要。
-
gutter-position [ before | after | split | inside | inside-static ]
设置间隔的位置。before / after / split 都是使用
margin，方向不同，split 是两边分别设置，而 inside 则是使用padding，两边都设置，inside-static 的区别只是使用静态单位。 还有一点是，before / after 会清理 头 / 尾 的间隔，但是其他的并不会处理。 -
global-box-sizing [ border-box | content-box ]
默认是 content-box，也就是浏览器的设置，susy 的宽度计算会使用 border-box 的模型，也就是默认的时候，会帮你给各个使用 mixins 的代码加上
box-sizing: border-box。如果你设置为 border-box，susy 则认为你自己会在 css 中进行 box-sizing 的配置，全局应用 border-box。
-
last-flow [ from | to ]
使用 float output 时，最后一个元素的 float 设置。
-
box-sizing [ border-box | content-box ]
这个设置区别于 global-box-sizing 在于它是选择在应用 Susy 提供的 mixins 的元素使用哪个设置。
-
gutter-override [ no-gutters / no-gutter | length ]
gutter 的自定义，可以设置 no-gutters 来移除 gutter 的输出，或者设置 gutters 的宽度。
还有一些 debug 配置项，这里就不多聊，详细可以参考 Susy 的 debug 配置。
Susy 支持使用自定义的一些 Mixins，在 use-custom 中进行配置：
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: false,
rem: true,
)通过这些配置可以让 Susy 查找是否有对应的 Mixins 可用，true 的话则是使用用户自己定义的 Mixins，这样可以更好和一些框架结合，例如 compass 等。详细参考 Susy 的 use-custom
Susy 提供了一些简单的方法来进行相关的配置，具体参见 Susy 的 Shorthand，这一部分更多是一个配置的辅助作用，不做详细阐述。
上边那一堆配置有什么用，主要还是提现在工具集这里，利用 Susy 提供的工具集合，可以自由，简单得来写出自己的布局结构。
结合配置，可以提供单元格的布局样式，也可以传入特定的宽度，在行边缘的时候也可以控制间隔。
.box1 { @include span(1); } // float: left; width: 25%; ...
.box2 { @include span(20%); } // ... width: 20% ...
.box3 { @include span(last 3); } // float: right; width: 40%; margin-right: 0 ...关于 span，有个 context 的概念，如上，则是相对于全局的 container 来说，但是：
.outer {
@include span(5);
.inner {
@include span(2 of 5); // 40%
}
}
.outer {
@include span(5) {
.inner {
@include span(2); // 40%
}
}
}如果放在 span mixin 的 block 中，则会以外层宽度为 context 来处理，不再是全局的。
span 第二个参数可以传入 nest，来说明里边会嵌套使用 span，来消除外层的 gutter。
span 除了作为 mixin 来 output 元素的布局 css 外，还可以作为 function 来获取布局的宽度。如：
.item { width: span(2); }span 还有其他参数，更多的内容还是参考：Susy 的 span 使用。
gutters 作为 mixin 使用，可以单纯获取当前配置的 gutter css 代码。
作为 function 使用，即可获取 gutter 的宽度，和 span() 类似。
通常为了保持多个元素的间隔相同，但是又不需要使用 span 时，便可以使用 gutters。
布局的容器，通常在外层的元素使用，生成容器需要的代码，如：
.wrap {
@include container();
}container 也可以作为 function 来使用，获取容器的宽度。
span 的时候提到 context 的概念，可以使用 of 来弥补，但是如果是多个元素的话，一个个写 of 也是麻烦，所以有了 nested。
@include nested(8) {
.span { @include span(3); }
.box { @include span(2); }
...
}当 nested 作为 function 使用时，可以用于返回一个 context。
很简单地，就是设置 box-sizing，大部分情况可以和 span 结合使用即可：@include span(25em border-box);
Susy 提供了一系列处理行和边缘的单元格的工具。
-
break
我们需要创建新的一行时，需要清理掉浮动，可以使用 break。如：
.new-line { @include break; } -
first
用于标识当前元素为行的第一个，会输出对应的 gutter 设置，只有当 gutter-position 为 before 的时候才会生效。
-
last
和上边类似，只不过是改成了最后一个而已
-
full
一个缩写，等同于
span(full)，元素充满整行。
用于设置单元格相关的 Margin 和 Padding。
-
pre
在元素前添加 margin，如：
.box { @include pre(2 of 7); } -
post
在元素后添加 margin，类似 pre，
.box { @include post(2 of 7); } -
pull
在元素前添加负的 margin：
.box { @include pull(2 of 7); } -
squish
同时使用 pre 和 post 的简写：
.box { @include squish(2 of 10); } // 不同的话可以这样：@include squish(2, 3); // => .box { @include pre(2 of 10); @include post(2 pf 10); }
这一部分的和 margin 的很像，只是少了一个负的添加。
-
prefix
在元素前添加 padding，
.box { @include prefix(2 of 7); } -
suffix
在元素后添加 padding，
.box { @include suffix(2 of 7); } -
pad
同时在元素前后添加 padding 的简写：
.box { @include pad(2, 3); }
注意，margins 和 padding 这些 mixins 使用时的前后都是相对于 flow 方向而言的。
添加相同值的负 margin 和 padding 来让整个元素的 border 和 background 挤出容器外部，而不影响内容。如：
.example1 { @include bleed(1em); }
// =>
.example1 {
margin: -1em;
padding: 1em;
}
// 传入多个参数控制不同的方向
.example2 { @include bleed(1em 2 20px 5%); }bleed-x 和 bleed-y 只是方便控制水平和垂直方向的别名。
Susy 提供了一些工具来帮助处理媒体查询。
-
susy-breakpoint
设置一个断点来调整整个布局的设置，在 mixin 的 block 中添加相关的代码。block 中的代码会放在特定的媒体查询中，如：
@include susy-breakpoint(30em, 8) { .example { @include span(2); } }
-
susy-media
提供了一个简单的 mixin 来处理媒体查询的相关条件。详细参考代码：
// min // --- @include susy-media(30em) { /*...*/ } @media (min-width: 30em) { /*...*/ } // min/max pair // ------------ @include susy-media(30em 60em) { /*...*/ } @media (min-width: 30em) and (max-width: 60em) { /*...*/ } // property/value pair // ------------------- @include susy-media(min-height 30em) { /*...*/ } @media (min-height: 30em) { /*...*/ } // map // --- @include susy-media(( min-height: 30em, orientation: landscape, )) { /*...*/ } @media (min-height: 30em) and (orientation: landscape) { /*...*/ }
个人建议使用上述最后一种，看起来清晰明确。
当你页面的布局格式相对比较复杂，同时可能需要进行响应式的设计时，Susy 不失为一个好选择。
和其他响应式不同，Susy 有超强的自由性，可以很好地针对自身的业务去进行设计和开发。使用方便的同时，在布局方面，代码整体有一个统一的风格，维护上也会舒服很多。
结合 Susy，可以进一步定制符合自身业务的很多 mixin 来进一步提升开发的效率。
当然，布局和结构比较简单的页面便不建议使用了，开发者能够更好把握自己的样式代码，并且省去学习成本。