初窥门径

Susy 是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。它的能力正如官网的简介一样强大：

Your markup, your design, your opinions, out math.

栅格布局

栅格设计的特点是重视比例、秩序、连续感和现代感。 以及对存在于版面上的元素进行规划、组合、保持平衡或者打破平衡，以便让信息可以更快速、更便捷、更系统和更有效率的读取；另外最重要的一点是，负空间的规划（即：留白）也是栅格系统设计当中非常重要的部分。—— 维基百科

参考文献：http://sagashen.lofter.com/post/11545c_785887

安装与使用

Susy 是基于 Sass 开发的，严格上讲并不是一个框架，而是类库，起初，它的设计初衷是作为 Compass 平台的一部分。建议大家在 Compass 的环境下使用 Susy。

Susy 并非一定要基于 Compass，它还支持 Webpack，Gulp，Grunt等自动化工具编译，详细可以查看官网文档

#终端指令
gem install susy


#如果已有compass项目
compass install susy


#如果是新初始化compass项目
compass create --using susy <project name>

默认你项目的 项目名/sass/ 文件夹下会生成一个 _grids.scss 文件

打开 _grids.scss 文件，已经引入了 susy

// Requirements
// ============


@import "susy";


$susy: (
  columns: 12,
  gutters: 1/4,
);

$susy 是 Susy 的一个全局配置变量。

$susy: (
  flow: ltr,                        // 从左至右
  math: fluid,                      // 可选值： fluid | static , 网格的计算单位，fluid是百分号%，static是作用域的倍数em
  output: float,                    // 可选值： float | isolate, float是浮动形式，不解释，isolate是一种百分比溢出的修复，详细看http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
  gutter-position: after,           // 可选值：before | after | split | inside | inside-static , before,after对应margin-right,margin-left,split是padding-left&padding-right,inside-static也是padding,但是单位是px,
  container: auto,                  // 可选值： <length> | auto , 总区域宽度，auto则以父元素的宽度为值
  container-position: center,       // 可选值： left | center | right | <length> [*2]，总区域的水平对齐方式
  columns: 4,                       // 列数
  gutters: .25,                     // 沟值
  column-width: false,              // 可选值：<length> | false/null ，设定每列宽度，这个比较鸡肋，绝大部分情况下不用设置，除非需求奇葩。
  global-box-sizing: content-box,   // 可选值：border-box | content-box
  last-flow: to,                    // 可选值：from | to ,建议不要改这个值，当你改成from的时候，last方法将不起作用
  debug: (                          // debug
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (                     // 自定义 mixins
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

专业词释义

isolate 布局

针对不同浏览器对小数点的四舍五入处理修正，如图：

gutter , row , container

沟，行，全局

实战

不同配置的grids共存实践

$normal:(
  columns:12,
  column-width:60px,
  debug:(image:show)
);


$isolate:(
  columns:6,
  gutters:0,
  debug:(image:show)
);


$isolate-pad:(
  columns:12
);




$pad:1024px;


@include with-layout($normal) {
  .normal{
    height: 50px;
    @include container;
  }
}




@include with-layout($isolate) {
  .isolate{
    height: 50px;
    @include container;
    @include susy-breakpoint($pad,$isolate-pad) {
        @include container;
    }
  }
}

造个轮子 —— Bootstrap grids

$susy:(
  debug:(image:show),
  columns:12,
  gutters: 0,
  gutter-position: inside,
  box-sizing:null
);


$Small-device:( 12 (32.5px 0px) static);
$break-Small-device: 768px; //等等要拿來設定susy-breakpoint斷點用






[class^=col-xs],[class^=col-sm]{
  padding-left: 15px;
  padding-right: 15px;
  height: 50px;
  background-color: #eee;
  border:1px #666 solid;
  margin-bottom: 10px;
}




@for $i from 1 through 12 {
    .col-xs-#{$i}{
      @include span($i)
    }
}


@include susy-breakpoint($break-Small-device) {
  @for $i from 1 through 12 {
    @include with-layout($Small-device) {
      .col-sm-#{$i}{
        @include span($i 0);
      }
    }
  }
}