susy 使用步骤

1 . 设置全局默认配置

susy的默认配置参数

$susy: ( flow: ltr, math: fluid, output: float, gutter-position: after, container: auto, container-position: center, columns: 4, gutters: .25, column-width: false, global-box-sizing: content-box, last-flow: to, debug: (     image: hide,    color: rgba(#66f, .25),     output: background,     toggle: top right,     ),     use-custom: (         background-image: true,        background-options: false,        box-sizing: true,        clearfix: false,        rem: true,        ));

一般只需要重新配置：

$susy:(    global-box-sizing: border-box,    columns: 12,    gutters: 0.25em,    gutter-position: inside,    container-position:center);@include border-box-sizing();

border-box-sizing 混合宏作用：

*, *:before, *:after {  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box;}

2 . 为网站的最外部容器添加 container 混合宏

.container{@include container(); //可以不填 默认值为auto，也可以填*%或绝对数值*xp@include clearfix(); //生成代码 overflow: hidden; *zoom: 1;}

编译结果：

.container{  max-width: 1120px;  margin-left: auto;  margin-right: auto;  overflow: hidden;  *zoom: 1;  }.container:after{    content: " ";    display: block;    clear: both; }

3 . 使用span混合宏或者span函数确定栅格的宽度
①因为span混合宏编译后会生成宽度和左浮动，所以需要在其后加break混合宏（break混合宏可以清除之前的浮动，从而新建行或者边界元素），也可以通过给span添加关键字的方式添加。
② 使用gallery混合宏处理子像素约取问题
③ gutter混合宏 为column根据gutter-position的属性设置添加padding或margin

.content{@include span(1 of 10); //默认为12列，可以通过这种方式修改列数@include break; //清除浮动//@include gutter(10);  布局为10列是padding的左右宽度（span混合宏有自带不需要写，可以做覆盖用）}

4 . padding和margin的设置
①margin
Pre 、 Post 根据布局流的方向，分别在元素左、右添加边距。
pull 根据布局流的方向，在元素之前添加负边距。 -
squish 为同一元素同时添加 左、右外边距的
②padding
Prefix、suffix 分别为元素左、右添加内边距。
Pad 同时为元素添加左右内边距。
③ Bleed 同时为元素添加向外边距和正向内边距 （bleed-x和bleed-y）