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）