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

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

目录

• 快速入门
• 配置
• 简写
• 工具
• 自定义

快速入门

Sass 是 Susy 唯一需要依赖的环境，所以必须安装 Sass。同时，Susy 的设计初衷是作为 Compass 平台的一部分，所以，建议使用 Compass。此外，也建议配合使用 Breakpoint 和 Vertical Rhythms 工具。

简单安装：

# 终端指令
gem install susy

Bundler or Rails

在 Rails 下使用 Susy 2，必须在 Gemfile 中更新 sass-rails ~> 5.0.0.beta1。之所以这么做，是因为 Susy 2 需要的基于 Sass 3.3+，但是 Rails 4.1 及其以下版本的 sass-rails 并不支持 Sass 3.3。

# Gemfile
# gem 'sass-rails', '~> 4.0.3'
gem 'sass-rails', '~> 5.0.0.beta1'
gem 'susy'
# 如果想要使用 compass:
gem 'compass-rails', '~> 2.0.0'
# config/application.rb
require 'susy'
# 终端命令
bundle install

如果你需要将 Susy 添加到现有的 Rail 应用中，那么也可以根据上述的步骤，但最后一步需要使用 bundle update 而不是 bundle install：

# 终端命令
bundle update

Compass

如果你想配合 Compass 使用 Susy，那么首先需要安装 Compass。然后，新建一个 Compass 项目， 并在新建命令中直接安装 Susy：

# 终端命令
compass create —using susy <project name>

或者，使用终端命令在相关项目中使用 Susy：

# 终端命令
compass install susy

Bower

# 终端命令
bower install susy —save

使用这条命令就可以将 Susy 安装到项目中的 bower_components 文件夹，如果没有该文件夹，添加前系统会自动新建该文件夹。

Grunt&Yeoman

通过添加一条命令到 Gruntfile.js，就可以配合 Grunt 使用 Susy。你需要将这一行命令添加到 Sass task。当然，如果你也使用 Compass，那么还要将这条命令添加到 Compass task 中。

Gruntfile.js 位于项目的根目录，其中和 Sass 相关的条目就是我们要修改的地方。然后，添加 require: ‘susy’ 到 options 对象中（如下所示）：

// Gruntfile.js
sass: {
  dist: {
    options: {
      style: ‘expanded’,
      require: ‘susy’
    },
    files: {
        ‘css/style.css’: ‘scss/style.scss’
    }
  }
}

这里，我会假设你已经安装了 Susy，那么通过上述的修改，现在它就顺利地被添加到了项目中，而且不会和 Yeomans grunt 有所冲突。

接下来添加到 Compass task 中。首先，打开项目根目录下的 Gruntfile.js 文件，找到 Compass 相关的规则。然后，添加 require: ‘susy’ 到 options 对象中（如下所示）：

// Gruntfile.js
compass: {
    options: {
      require: ‘susy’,
      …
    }
  }
}

好了，如果你之前成功安装了 Susy，那么通过上述步骤，就可以将它融入 Yeomans grunt 中，并且还可以在项目中使用 Compass。

手动安装

如果你不喜欢使用包管理器，而是直接下载源文件，那么也是可以的。操作步骤如下：

• 从 GitHub 上下载 zip 文件并解压
• 复制解压后 /sass 文件夹的全部内容
• 粘帖到你的项目中（具体位置需要根据具体情况分析，一般是样式表的位置）

版本管理

如果你在诸多不同的项目中使用 bundled gems，就会发现管理 gem 的版本管理是个很头疼的问题。

如果你使用的是 Ruby 开发环境，那么只需检查一下 RVM。如果使用的是 Python 开发环境，那么建议使用 virtualenv 执行 postactivate 和 predeactivate 文件中的相关脚本。

一旦上述步骤完成，那么在这两种环境中就可以使用 Bundler 进行版本管理了，轻松安装和更新相关 gem 。

快速上手

所有软件安装按成后，那么就可以将 Susy 导入到 Sass 文件了：

@import “susy”;

Susy 最基础的布局有两个简单的混合宏组成：

// 建立一个布局上下文
@include container;
// 为元素设置布局效果 
@include span(<width>); 

举例如下：

body { @include container(80em); }
nav { @include span(25%); }

如果你想为栅格内嵌的元素设置布局效果，那么可以使用 span 混合宏计算列宽：

nav { @include span(3 of 12); }

这么一条语句就实现了，神奇吧，完全不需要考虑背后的计算。Susy 会帮你做相关的数学计算，所以你可以天马行空地去布局。

main {
  float: left;
  width: span(4);
  margin-left: span(2) + gutter();
  margin-right: gutter();
}

你也可以设置自己的全局配置，通过该配置就可以让 Susy 服务于自己个性化的需求。设置全局配置，需要创建一个 $susy map 变量，然后将个性化的配置写到其中：

$susy: (
  // 栅格数量
  columns: 12, 
  // 栅格间距 
  gutters: 1/4,
);

这里只是一个简单的入门示例，此外还有大量参数可以用来进行个性化配置。欲知详情，请见下回分解。

配置

Susy 2.2 的语法建立在一系列的配置之上的，而这些配置可以是 Sass Map，也可以是简写形式。这两种语法格式可以交换的：

$susy: (
  columns: 12,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: inside,
);
$shorthand: 12 1/4 fluid float inside;

这两种方式都可以作为 Susy 中函数和混合宏的参数。Maps 甚至可以成为简写形式的一部分：

$susy: (
  columns: 12,
  gutters: .25,
  math: fluid,
);
@include layout($susy float inside);

除非特别声明，大多数的配置参数都可以用于全局或局部配置。

全局默认配置

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,
  )
);

你可以设置自己的全局默认配置，或是根据需要创建一个独立的布局 maps：

$susy: (
  columns: 12,
  gutters: .25,
  gutter-position: inside,
)

Layout

Susy 中的“布局”实际上组合了诸多的配置参数。布局配置可以保存为 maps 形式，也可以保存为简写形式。

Laout [function]

将简写形式的配置转换为 map 形式。

function:

• 语法格式: layout($layout)
• $layout: <layout>

// 传给函数的参数
$map: layout(auto 12 .25 inside fluid isolate);
// 生成结果
$map: (
  container: auto,
  columns: 12,
  gutters: .25,
  gutter-position: inside,
  math: fluid,
  output: isolate,
);

当你需要合并不同形式的配置参数时，这个方法会非常有用。但是不能用来合并两个缩写形式的配置：

// 错误示例
$short: 12 .25 inside;
@include layout($short fluid no-gutters);

可以将一个 map 变量与一个缩写形式的配置合并：

$map: layout(12 .25 inside);
@include layout($map fluid no-gutters);

或者用来合并两个 map 变量：

$map1: 13 static;
$map2: (6em 1em) inside;
@include layout($map1 $map2);

Laout [mixin]

设置新的全局默认布局配置。

mixin:

• 语法格式: layout($layout, $clean)
• $layout: <layout>
• $clean: <boolean>

@include layout(12 1/4 inside-static);

默认情况下，这些新的配置参数会添加到既有的全局配置中。使用 $clean 参数可以从零开始创建新的配置。

With Layout

为局部代码设置临时配置。

mixin：

• 语法格式: with-layout($layout, $clean) {@content}
• $layout: <layout>
• $clean: <boolean>
• @ontent: Sass content block

@include with-layout(8 static) {
  // 临时配置生效
}
// 离开上段代码后，全局配置恢复效用

默认情况下，这些新的配置参数会添加到既有的全局配置中。使用 $clean 参数可以从零开始创建新的配置。

Susy-Get

function：

• 语法格式: susy-get($key, $layout)
• $key: Setting name
• $layout: <layout>

使用 susy-get 函数，可以随时获取布局配置参数：

$large: layout(80em 24 1/4 inside);
$large-container: susy-get(container, $large);

获取类似 debug/image 的嵌套配置，需要使用列表传递完整路径给 $key 参数：

$debug-image: susy-get(debug image);

$layout 参数缺省时，默认调用全局用户配置，如果仍然缺失，最终会调用全局默认配置。

Flow

设置文本阅读方向。除非另有声明，否则布局元素就会根据 flow 的值确定堆叠方向。

设置:

• 关键字: flow
• 作用域: global, local
• 可选值: rtl | ltr
• 默认值: ltr

ltr:布局元素从左到右布局。

rtl:布局元素从右到左布局。

Math

Susy 既可以生成相对宽度（使用百分比），也可以生成固定宽度（使用给出的单位）。

设置:

• 关键字: math
• 作用域: global, local
• 可选值: fluid | static
• 默认值: fluid

fluid:内部的所有栅格元素都会根据外部的容器宽度生成相应的百分比值。

static:内部的所有栅格宽度值会被计算为 column-width 参数值的倍数。如果你将 column-width 设为 4em，那么栅格宽度就会生成以 em 为单位的值，同时该宽度还会是 column-width 的整数倍。

Output

在 Susy 中可以使用多种布局技巧。现在，Susy 中已有一个浮动模块，同时还有一个基于浮动模块的孤立处理方案。未来，还会加入 flexbox、grid 和其他布局方式。

设置:

• 关键字: output
• 作用域: global, local
• 可选值: float | isolate
• 默认值: float

float:浮动布局是网页中最常用的布局方式了。

isolate:孤立布局（isolation）是由 John Albin Wilkins 开发的一种布局技巧，主要用来解决流动布局中的子像素约取错误。我们发现使用这个技巧有助于修正糟糕的约取错误，同时认为这个技术本身太过于机巧了。

Container

设置容器元素的最大宽度。

设置:

• 关键字: container
• 作用域: global, local[container only]
• 可选值: <length> | auto
• 默认值: auto

<length>:可以设置任意精确的数值（比如 60em 或者 80%），然后该数值会成为容器的宽度值。

<auto>:Susy 会依据其他的栅格设置，自动计算容器的宽度，最后返回一个百分比。

对于固定宽度的布局，需要设置 column-width 替换 container: auto。将容器划分为连续的纵列往往会遇到子像素约取问题，这让每个开发者都感到头疼。

Container Position

相对父元素（通常为浏览器窗口）排列容器元素。

设置:

• 关键字: container-position
• 作用域: global, local[container only]
• 可选值: left | center | right | <length> [*2]
• 默认值: center

left:使用 margin-left: 0; 和 margin-right: auto;，将容器元素从左开始排列。

center:同时设置 margin 左右边距值为 auto，将容器元素剧中排列。

right:使用 margin-left: auto; 和 margin-right: 0;，将容器元素从右开始排列。

<length> [*2]:如果给定了一个准确的长度，那么这个长度将会被解析为容器两侧的边距，从而使容器和浏览器视口的边缘形成一定的距离。如果给定了两个值，那么就会被分别解析为左右边距值。

Columns

配置栅格的数量或编制。

设置:

• 关键字: columns
• 作用域: global, local
• 可选值: <number> | <list>
• 默认值: 4

<number>:构成布局的纵列数量。

<list>:对于不对称栅格，需要基于第一个纵列的宽度，列出每一个纵列的宽度。(1, 2) 不对称栅格将会创建两个纵列，其中第二个纵列的宽度是第一个纵列的两倍。对于斐波那契栅格，可以设为 (1 1 2 3 5 8 13)。

Gutters

为栅格中的纵列设置间距（译者注：间距与框模型的内边距、外边距是不同的概念）。

设置:

• 关键字: gutters
• 作用域: global, local
• 可选值: <ratio>
• 默认值: 1/4

<ratio>:间距可以依据纵列宽度的一个比例来确定。默认的 1/4 比值表示间距为纵列宽度的四分之一。对于不对称布局，间距是一个纵列宽度单位的四分之一。

如果你想设置更准确的纵列宽度和间距，可以讲 gutters 值按 <gutter-width>/<column-width> 形式赋值，也可以带上具体的单位。

// 70px 的纵列宽度, 20px 的间距
$susy: (
  gutters: 20px/70px,
);

Column Width

为特定纵列设置准确的宽度值。

设置:

• 关键字: column-width
• 作用域: global, local
• 可选值: <length> | false/null
• 默认值: false

<length>:该值确定纵列的宽度，需要使用有效的单位。在固定宽度布局中，该值用来计算所有栅格的宽度，但在浮动布局中，只会用来计算外部容器的最大宽度（max-width）。

false/null:在浮动布局中没有必要设置明确的纵列宽度，除非你想生成精确的容器宽度。

Gutter Position

在布局中添加间距，该属性用来明确所添加间距的位置和方式，甚至是明确是将其设为布局元素的内边距和是外边距。

设置:

• 关键字: gutter-position
• 作用域: global, local
• 可选值: before | after | split | inside | inside-static
• 默认值: after

before:依据布局流的方向（从左到右，从右到左），将间距设为布局元素左外边距（从左到右）或右外边距（从右到左）。最终会移除每行第一个元素的间距。

after:依据布局流的方向（从左到右，从右到左），将间距设为布局元素右外边距（从左到右）或左外边距（从右到左）。最终会移除每行最后一个元素的外边距。

split:将间距设为布局元素的左右两个外边距，并且不移除边缘处栅格的外边距。

inside:将间距设为布局元素的左右两个内边距，并且不移除边缘处栅格的内边距。

inside-static:将间距设为布局元素的左右两个内边距。即使是在流动布局上下文中，也不移除边缘处栅格的内边距。

Global Box Sizing

设置全局的盒模型规则。

设置:

• 关键字: globe-box-sizing
• 作用域: global, local
• 可选值: border-box | content-box
• 默认值: content-box

content-box:除非另作声明，否则浏览器将会使用 content-box 模型。

border-box:如果你正在使用类似 Paul Irish 的通用 border-box 技巧，那么你就有必要将该选项设置为 border-box。你也可以使用 border-box-sizing 混合宏，更细节的工作我们会帮你解决的。

更多信息，请参考 MDN box-sizing documentation。

Last Flow

当使用浮动布局时，该设置用来确定每行最后一个元素的浮动方向。

设置:

• 关键字: last-flow
• 作用域: global
• 可选值: from | to
• 默认值: to

from:这是布局中所有元素的默认值。在从左到右的布局流中，from 的方向就是 left，相应的最后一个元素的浮动方向就是 left。

to:在很多情况下（特别是流动布局中），将每行的最后一个元素浮动到相反的方向非常有用。

Debug

使用 Susy 布局时，可以使用内建的一些调试工具。下面的这些设置有利于你控制调试环境。

setting block:

• 关键字: debug
• 作用域: global, local[container only]
• 可选值: map of sub-settings

$susy: (
  debug: (
    image: show,
    color: blue,
    output: overlay,
    toggle: top right,
  ),
);

提醒：栅格图片的位置有时并不精确。浏览器对于背景图片也有子像素约取错误。这意味着无法实现完美像素的尺寸，也意味着调试过程的艰难。预期中栅格图片 to 的方向（如果是从左到右布局流，那么 to 的方向就是 right）会有少许像素的偏移。

Debug Image

控制栅格图片的启用和关闭。

设置:

• 关键字: debug image
• 作用域: global, local[container only]
• 可选值: show | hide | show-colums | show-baseline
• 默认值: hide

show:通常为了调试，会为容器元素的背景显示栅格图片。如果你使用 Compass vertical rhythms（或者设置了自定义的 $base-line-height 变量），Susy 都会展示网格基线。

hide:隐藏所有的栅格调试图片。

show-columns:只显示纵向的栅格列，即使只有一条栅格基线。

show-baseline:如果设置了 $base-line-hieght 变量，那么就会只显示栅格基线。

Debug Output

调试图片既可以显示为容器的背景，也可以生成一个覆盖层。

设置:

• 关键字: debug output
• 作用域: global, local[container only]
• 可选值: background | overlay
• 默认值: background

background:调试图片将会生成为容器元素的背景图片。

overlay:调试图片给将会使用为容器元素添加 ::before 元素，从而生成一个覆盖层。默认会隐藏覆盖层，但也会在窗口的一角提供一个触发点。鼠标悬停到这个触发点时，就会将覆盖层显示出来。

Debug Toggle

如果你启用了栅格覆盖层选项，Susy 将会生成一个触发点，用来显示或隐藏覆盖层。当鼠标悬停到这个触发点时，就会显示覆盖层。你也可以通过组合使用 top right bottom 和 left，指定触发点的位置。

设置:

• 关键字: debug toggle
• 作用域: global, local[container only]
• 可选值: right | left 和 top | bottom
• 默认值: top right

Debug Color

改变栅格图片上的纵列颜色。

设置:

• 关键字: debug color
• 作用域: global
• 可选值: <color>
• 默认值: rgba(#66f, .25)

自定义

这里有一些通用的辅助函数用来使用 Susy，也可以自定义相关属性或使用一个第三方库，比如 Compass 或 Bourbon。

自定义 clearfix

告知 Susy 在全局使用 clearfix 混合宏。

设置:

• 关键字: use-custom clearfix
• 作用域: global
• 可选值: <boolean>
• 默认值: false

false:Susy 使用内建的精简版 clearfix。

true:Susy 将会查找现有的 clearfix 混合宏，如果没有找到，就调用内建的精简版 clearfix。

自定义背景图片

告知 Susy 在全局使用 background-image 混合宏。这个属性只适用于调试模式。

设置:

• 关键字: use-custom background-image
• 作用域: global
• 可选值: <boolean>
• 默认值: true

false:Susy 将会直接生成背景图片的 CSS 代码。

true:Susy 将会查看是否存在 background-image 混合宏（比如来自 Compass 和 Bourbon 的混合宏），如果没有找到就只会生成 CSS 代码。

自定义背景选项

告知 Susy 在全局使用 background-size，-origin 和 -clip 混合宏。该属性只适用于调试模式。

设置:

• 关键字: use-custom background-options
• 作用域: global
• 可选值: <boolean>
• 默认值: false

false:Susy 将会直接生成 background-options 的 CSS 代码。

true:Susy 将会查看是否存在 background-size，-origin 和 -clip 混合宏（比如来自 Compass 和 Bourbon 的混合宏），如果没有找到就只会生成 CSS 代码。

自定义断点选项

告知 Susy 使用自定义的 breakpoint 混合宏，比如插件 [Breakpoint](http://breakpoint-sass.com/) 提供的 breakpoint 混合宏。

设置:

• 关键字: use-custom breakpoint
• 作用域: global
• 可选值: <boolean>
• 默认值: true

false:Susy 将会使用内建的媒体查询混合宏。

true:Susy 将会查看先有的 breakpoint 混合宏，比如来自插件 Breakpoint 的混合宏。如果没有找到就会回退到内建的媒体查询混合宏。

自定义 Box Sizing

告知 Susy 在全局使用 box-sizing 混合宏。

设置:

• 关键字: use-custom box-sizing
• 作用域: global
• 可选值: <boolean>
• 默认值: true

false:Susy 将会是输出 -moz、-webkit 以及标准形式的 box-sizing。

true:Susy 将会查看现有的 box-sizing 混合宏（比如来自 Compass 和 Bourbon 的混合宏），如果没有找到就回退到 -moz、-webkit 以及标准形式的 box-sizing。

自定义 Rem

告知 Susy 使用 Compass 支持的 rem 模块。

设置:

• 关键字: use-custom rem
• 作用域: global
• 可选值: <boolean>
• 默认值: true

false:Susy 将会直接生成长度值的 CSS 代码。

true:Susy 将会查看现有的 rem 混合宏，并检查 Compass 提供的 $rem-with-px-fallback 和 $rhythm-unit 属性。如果没有找到，就只会生成 CSS 代码。

Location

指定栅格中特定的行使用行边缘、孤立或者不对称布局。Location 关键字不需要 at 标志。

设置:

• 关键字: location
• 作用域: local
• 可选值: first/alpha | last/omega | <number>
• 默认值: null

first/alpha:定位为 1。

last/omega:定位为最后一个纵列，之前的任意纵列都会被包含在相关的 span 之中。

<number>:将任意纵列定位到 1 到可用纵列总数之间。

Box Sizing

对任意元素设置新的盒模型。

设置:

• 关键字: box-sizing
• 作用域: local
• 可选值: border-box | content-box
• 默认值: null

border-box:生成的 box-sizing: border-box 模型的 CSS 代码。

content-box:生成的 box-sizing: content-box 模型的 CSS 代码。

Spread

调整单个纵列中的诸多间距。

设置:

• 关键字: spread
• 作用域: local
• 可选值: narrow | wide | wider
• 默认值: various…

narrow:在大多数情况下，跨纵列栅格中都会间距。一个 3 narrow 的布局元素将会包含 3 个纵列和两个内部的间距。默认情况下，这适用于大多数情境。

wide:有时候你需要布局元素包含一个外部的间距。那么一个 3 wide 的布局元素就会包含 3 个纵列和 3 个间距，其中两个间距在内部，一个间距在外部。默认情况下，这适用于少数的几个 margin/padding 混合宏。

wider:有时候你需要布局元素两边都包含间距。那么一个 3 wider 的布局元素就会包含 3 个纵列和 4 个间距，其中两个内部间距，两个外部间距。

Gutter Override

为某个元素设置一个一次性的精确值，或者完全移除间距。

设置:

• 关键字: gutter-override
• 作用域: local
• 可选值: no-gutters/no-gutter | length
• 默认值: null

no-gutters/no-gutter:Remove all gutter output

<length>:使用精确的值替换既有的间距值。

Role

将一个元素设置为包含子元素的嵌套上下文。

设置:

• 关键字: role
• 作用域: local
• 可选值: nest
• 默认值: null

nest:将一个内部的栅格元素设置为包含子元素的嵌套上下文。

注意：这可用于任意栅格类型，但是需要嵌套 split、inside 或 inside-static 类型的间距。

简写

Susy 还提供了一个简写语法，便于向函数和混合宏传递参数。大多数情况下，这种语法都可以比较容易维护和阅读的，只有当你需要深入理解时才会显得有些复杂。

// 创建一个 80em 宽的容器
@include container(80em);

// 使用 12 个纵列中的 3 个创建一个布局元素
@include span(3 of 12);

// 创建一个 960 栅格系统
@include layout(12 (60px 20px) split static);

// Span 3 isolated columns in a complex, asymmetrical grid, without gutters
@include span(isolate 3 at 2 of (1 2 3 4 3 2 1) no-gutters);

概览

在大多数情况下，除少数规则外，参数顺序并不重要。语法格式主要由三部分组成。

语法格式:

• Shorthand: $span $grid $keywords

span:一个布局元素可以使用任意长度。在某些情况下，如果值为无单位数字，意味着布局元素包裹的纵列数量。计算出的具体数值最终要根据所使用的函数和混合宏来判断。使用标准的 CSS TRBL 语法，在某些混合宏中甚至允许存在多个布局元素。

grid:由一个纵列参数和一个可以选的间距、纵列宽度参数。就像下面这样：

// 12 列栅格
$grid: 12;

// 12 列栅格以及三分之一栅格宽度的间距
$grid: 12 1/3;

// 12 列栅格，每个栅格 60px, 每个间距 10px
$grid: 12 (60px 10px);

// 不对称栅格，间距为一个基本栅格单位的四分之一
$grid: (1 2 3 2 1) .25;

keywords:使用 keywords 是最简单的方式了。大多数的参数都有简洁的关键字，而且无需顾虑关键字的顺序。相关的关键字包含在布局元素或栅格中都可以。

// Susy 中的所有关键字：
$global-keywords: (
  container            : auto,
  math                 : static fluid,
  output               : isolate float,
  container-position   : left center right,
  flow                 : ltr rtl,
  gutter-position      : before after split inside inside-static,
  debug: (
    image              : show hide show-columns show-baseline,
    output             : background overlay,
  ),
);

$local-keywords: (
  box-sizing           : border-box content-box,
  edge                 : first alpha last omega,
  spread               : narrow wide wider,
  gutter-override      : no-gutters no-gutter,
  clear                : break nobreak,
  role                 : nest,
);

全局关键字在任意地方使用，最终会被添加到默认配置中。本地关键字只用在特定区域内使用。

Layout

大体来说，最精简的简写形式往往用来定义布局。

shorthand

Pattern: <grid> <keywords>

无需任何额外条件，所有的参数都是可选的，并且会在全局发挥作用。建议优先考虑使用栅格和关键字进行布局开发。

// 栅格: (columns: 4, gutters: 1/4, column-width: 4em);
// 关键字: (math: fluid, gutter-position: inside-static, flow: rtl);
$small: 4 (4em 1em) fluid inside-static rtl;

使用 Layout 函数可以轻松转换简写形式为 map 形式。

Span

Susy 大多数的函数和混合宏都是用来计算或设置宽度和布局元素的。

shorthand

Pattern: <span> at <location> of <layout>

Susy 中大多数的布局元素要么使用了无单位的数值，要么就是使用了精确的数值。其中的一些会需要提前定位，特别是孤立和不对称布局。

简写的布局元素将向下面这样：

// Pattern:
$span: $span at $location of $layout;

// span: 3;
// location: 4;
// layout: (columns: 12, gutters: .25, math: fluid)
$span: 3 at 4 of 12 .25 fluid;

// 大多数情况下只需要 $span
$span: 30%;

其中，at 标志位于定位之前（除非定位是一个关键字）；位于 of 标识之后的都会被视为栅格排列的一部分。

有一些混合宏可以接受 CSS TRBL 模式的参数或者其他专有术语，用来设置多个布局元素。这些都会在函数/混合宏部分有记录。

工具集

Susy 2.0 的工具集建立于简写形式之上。使用简写形式控制布局细节，可以让你在编译时动态地修改默认配置，不必为一时一地的样式和栅格元素所制约。

Span[mixin]

将布局的任意部分包裹到某个元素中。对于浮动和孤立布局，将会为它们添加必要的浮动、宽度和外边距属性。

mixin

• 语法格式：span($span) { @content }
• $span：
• @content: Sass content block

可以通过多种方式使用这个 span 混合宏……

Arbitrary Widths

最简单的用法就是直接给它传递宽度值：

// arbitrary width
.item { @include span(25%); }

// float output (without gutters)
.item {
  float: left;
  width: 25%;
}

Grid Widths

如果你正在使用一个栅格，那么也可以传递一个纵列的数量：

// grid span
.item { @include span(3); }

// output (7-column grid with 1/2 gutters after)
.item {
  float: left;
  width: 40%;
  margin-right: 5%;
}

Row Edges

当你正在使用一个前后具有间距的栅格时，有时会需要识别当前行中的第一或者最后一个元素，此时就可以使用 Susy 移除多余的间距，便于识别相应的元素。

// grid span
@include span(last 3);

// output (same 7-column grid)
.item {
  float: right;
  width: 40%;
  margin-right: 0;
}

由于历史遗留问题，同样可以使用 alpha 和 omega 分别替换 first 和 last。

Context

当你需要为流失布局做计算，并嵌套栅格元素到其他元素中时，必然就会遇到环境上下文（Context）：

// 10-column grid
.outer {
  @include span(5);
  .inner { @include span(2 of 5); }
}

可以使用 of 标志标识环境上下文。环境上下文代表的就是父级布局元素。在某些情况下，可以通过在 span 标签内布局嵌套元素来声明布局变动：

// 10-column grid
.outer {
  // out here, the context is 10
  @include span(5) {
    // in here, the context is 5
    .inner { @include span(2); }
  }
}

Nesting

使用 inside、inside-static 或者 split 形式的间距不需要担心边界情况，但需要担心嵌套时候的表现。

如果某个元素具有网格相关的子元素，那么就需要标记为 nest：

// inside, inside-static, or split gutters
.outer {
  @include span(5 nest);
  .inner { @include span(2 of 5); }
}

Location

不对称栅格布局和孤立布局设计都需要知道：对于布局元素定位的知识。在这两种布局中，可以使用 at 标志来定位。

对于孤立布局，可以使用精确的宽度值，也可以使用纵列的索引（从 1 开始计算）。对于不对称栅格布局，只能使用纵列的索引：

.width { @include span(isolate 500px at 25%); }
.index { @include span(isolate 3 at 2); }

narrow, wide, wider

一个布局元素，默认只会包含纵列之间的间距，所以在 narrow 形式下，两个纵列之间包含一个间距。在某些情况下，你会希望在两边添加额外的间距。那么两个纵列就可以包含更多的间距，在 wide 形式下会多 1 个间距；在 wider 形式下回多出 2 个间距。

// grid span
.narrow { @include span(2); }
.wide { @include span(2 wide); }
.wider { @include span(2 wider); }

// width output (7 columns, .25 gutters)
// (each column is 10%, and each gutter adds 2.5%)
.narrow { width: 22.5%; }
.wide { width: 25%; }
.wider { width: 27.5%; }

如果你正在使用内部间距，那么布局元素默认为 wide 的间距形式，但可以手动设置为其他形式。

Other Settings

使用全部的关键字可以设置完整的环境上下文，使用 break 可以清除之前的浮动，从而新建行或者边界元素，也可以使用 nobreak 不清楚浮动。使用 no-gutters 可以清除独立布局元素的间距，使用 border-box 或者 content-box 可以在编译中动态修改 box-sizing。

向简写形式传递一个 map 变量（比如 gutter-override: 1.5em），可以重写间距。

也可以在编译中动态改变输出样式、布局上下文和其他全局配置：

// grid span
.item { @include span(isolate 4 at 2 of 8 (4em 1em) inside rtl break); }

// output
.item {
  clear: both;
  float: right;
  width: 50%;
  padding-left: .5em;
  padding-right: .5em;
  margin-left: 25%;
  margin-right: -100%;
}

Span [function]

span 函数和 span 混合宏非常类似，但只会返回布局元素的宽度。可以用来自定义输出。

function

• 语法格式：span($span)
• $span：span

.item {
  width: span(2);
  margin-left: span(3 wide);
  margin-right: span(1) + 25%;
}

Gutters

function/mixin

• 语法格式：gutters($span)
• 替代格式：gutter($span)
• $span：

使用 gutter 或 gutters 函数，可以返回配置或当前上下文的间距。

// default context
margin-left: gutter();

// nested in a 10-column context
margin-left: gutter(10);

使用 gutter 或 gutters 混合宏，可以给任意元素添加间距，并根据 gutter-position 属性将间距设为 margin 或 padding。

// default gutters
.item { @include gutters; }

也可以传递精确的数值：

// explicit gutters
.item { @include gutters(3em); }

或者使用简写形式在编译中动态地调整细节：

// inside gutters
.item { @include gutters(3em inside); }

// gutters after, in an explicit (10 1/3) layout context
.item { @include gutters(10 1/3 after); }

Container

function/mixin

• 语法格式：container($layout)
• $layout：

使用 container 函数，可以根据传递的可选参数或者是全局配置，返回容器的宽度。

// global settings
width: container();

// 12-column grid
$large-breakpoint: container(12);

使用 container 混合宏可以直接给任意元素设置容器属性。

body {
  @include container(12 center static);
}

注意：固定宽度布局需要使用使用有效的纵列宽度属性。

Nested Context

function/mixin

• 函数：nested($span)
• 混合宏： nested($span) { @content }
• $span:
• @content: Sass content block

由于 Sass 与 DOM 结构以及网站的标记结构完全分离，所以 Susy 的混合宏无法获悉结构上的父子关系。如果你的容器包裹了一个新的布局上下文，且与默认配置不同，那么被嵌套的元素需明确地声明布局上下文。

body { @include container(8); }
.span { @include span(3 of 8); }

如果有大量的的代码块使用相同的布局上下文，那么就会显得有些臃肿。nested 混合宏提供了一个快捷方式，用来修改局部代码的布局上下文。

@include nested(8) {
  .span { @include span(3); }
}

当你使用不对称栅格布局的时候，设置布局上下文就不那么轻松了，因为此时你不仅要知道纵列的数量，还要知道在哪些纵列中嵌套。

.outer {
  @include span(3 of (1 2 3 2 1) at 2);

  // context is now (2 3 2)…
  .inner { @include span(2 of (2 3 2) at 1); }
}

nested 函数可以帮你更轻松的管理布局上下文，而无需进行大量的计算。

$grid: (1 2 3 2 1);

.outer {
  @include span(3 of $grid at 2);

  $context: nested(3 of $grid at 2);
  .inner { @include span(2 of $context at 1); }
}

Global Box Sizing

可以设置 [global-box-sizing](http://susy.readthedocs.org/en/latest/settings/#settings-global-box-sizing) 来匹配全局选择器中的 box-sizing。

mixin

• 语法格式: global-box-sizing($box [, $inherit])
• 快捷方式: border-box-sizing([$inherit])
• $box: content-box | border-box
• $inherit: [optional] true | false

将可选参数 $inherit 设置为 true，全局配置的值依然是 box-sizing，但有时会被重写，比如局部组件可以轻易设置局部的 box-sizing 属性，从而覆盖了全局的 box-sizing。一旦在组件中设置了 box-sizing，那么该组件内嵌套的所有元素都会使用这一修改后的属性。如果将可选参数 $inherit 设置为 false，那么组件内的修改不会影响到组件内的嵌套元素。组件内的嵌套元素仍然使用全局的 box-sizing。

可以将 box-sizing 参数通过简写形式传递给 span 混合宏。Susy 会自动设置相关元素的 box-sizing。

// input
.item { @include span(25em border-box); }

// sample output (depending on settings)
.item {
  float: left;
  width: 25em;
  box-sizing: border-box;
}

强烈建议使用全局的 border-box 参数，特别是使用了任意内置间距的布局形式时。

// the basics with default behavior:
* { box-sizing: border-box; }

// the basics with $inherit set to true:
html { box-sizing: border-box; }
* { box-sizing: inherit; }

Susy 需要获悉你正在使用的 box-sizing。最好的方法就是使用 Susy 的快捷方式设置全局的 box-sizing。

// the flexible version:
@include global-box-sizing(border-box);

// the shortcut:
@include border-box-sizing;

如果你想手动更改全局的 box-sizing，或者使用其他库修改，那么请通过修改 box-sizing 参数告知 Susy。

如果你需要兼容 IE 6/7，可以使用这个简单的[腻子脚本](https://github.com/Schepp/box-sizing-polyfill)。

Rows & Edges

使用浮动布局，需要注意行和边界的处理。

Break

mixin

• 语法格式: break()
• 重置方式: nobreak()
• 关键字: break | nobreak

创建新行前，有必要清理该行之前的所有浮动元素。通常可以使用 span 混合宏来解决这个问题。当你需要单独断行时，可以使用 Susy 提供的 break 混合宏。

.new-line { @include break; }

如果你需要永久性地覆盖这一属性，可以使用 nobreak 将其设为 clear:none。

.no-new-line { @include nobreak; }

break 和 nobreak 都可以作为 span 混合宏的关键字来使用。

First

mixin

• 语法格式: first($context)
• 替代方式: alpha($context)
• $context:

注意：只有 gutter-position 设为 before 时可以使用。

当 gutter-position 设为 before 时，我们需要移除每一行第一个元素的间距。对于这个问题，往往可以通过传递关键字给 span 混合宏来解决。有时候，你需要在使用 span 混合宏的同时，将某个元素设为 first。

.first { @include first; }

Susy 也支持 alpha 混合宏，用法和生成结果与 first 完全相同。

first 和 alpha 都可以作为 span 混合宏的关键字来使用。

Last

mixin

• 语法格式: first($context)
• 替代方式: alpha($context)
• $context:

注意：虽然只有 gutter-position 设为 after 的布局可以使用，但是对于解决任意布局上下文中的子像素约取问题都有帮助。

当 gutter-position 设为 after 时，我们需要移除每一行最后一个元素的间距，并且可以浮动到相反方向。对于这个问题，往往可以通过传递关键字给 span 混合宏来解决。有时候，你需要在使用 span 混合宏的同时，将某个元素设为 last。

.last { @include last; }

Susy 也支持 omega 混合宏，用法和生成结果与 first 完全相同。

last 和 omega 都可以作为 span 混合宏的关键字来使用。

Full

mixin

• 语法格式: full($context)
• $context:

这是 span(full) 的快捷形式，可以用来创建包含全部完整上下文的元素。

.last { @include full; }

full 也可以作为 span 混合宏的关键字来使用。

Margins

用来设置外边距的混合宏的简写形式。

Pre

mixin

• 语法格式: pre($span)
• 替代方式: push($span)
• $span:

根据布局流的方向，在元素前面添加边距。

.example1 { @include pre(25%); }
.example2 { @include push(2 of 7); }

Post

mixin

• 语法格式: post($span)
• $span:

根据布局流的方向，在元素前面添加边距。

.example1 { @include post(25%); }
.example2 { @include post(2 of 7); }

Pull

mixin

• 语法格式: pull($span)
• $span:

根据布局流的方向，在元素之前添加负边距。

.example1 { @include pull(25%); }
.example2 { @include pull(2 of 7); }

Squish

mixin

• 语法格式: squish($pre [, $post])
• $pre:
• $post: [optional]

为同一元素同时添加 pre 和 post 外边距的快捷方式。

// equal pre and post
.example1 { @include squish(25%); }

// distinct pre and post
.example2 { @include squish(1, 3); }

当元素之间共用相同的布局上下文时，可以传递相同的参数给 pre 和 post 混合宏。这中情境比较常见，有助于避免重复编写代码。

// shared context
.shared {
  @include squish(1 3 of 12 no-gutters);
}

// distinct context
.distinct {
  @include squish(1 at 2, 3 at 6);
}

Padding

用来设置内边距的混合宏的简写形式。

注意：padding 和 width 之间的关系需要根据 box-model 来确定。浏览器默认使用 content-box，那么就需要就爱那个 width 和 padding 加起来，所以具有 span(3) 和 prefix(2) 的布局元素占用 5 个纵列。对于建议的 border-box，padding 包含在 width 之中，所以无论是否有 padding，具有 span(3) 的布局元素都只会占用 3 列。

Prefix

mixin

• 语法格式: prefix($span)
• $span:

根据布局流的方向，在元素前面添加内边距。

.example1 { @include prefix(25%); }
.example2 { @include prefix(2 of 7); }

Suffix

mixin

• 语法格式: suffix($span)
• $span:

根据布局流的方向，在元素后面添加内边距。

.example1 { @include suffix(25%); }
.example2 { @include suffix(2 of 7); }

Pad

mixin

• 语法格式: pad($prefix [, $suffix])
• $prefix:
• $suffix:

为同一元素同时添加 prefix 和 suffix 内边距的快捷方式。

// equal pre and post
.example1 { @include pad(25%); }

// distinct pre and post
.example2 { @include pad(1, 3); }

当元素之间共用相同的布局上下文时，可以传递相同的参数给 pre 和 post 混合宏。这中情境比较常见，有助于避免重复编写代码。

// shared context
.shared {
  @include pad(1 3 of 12 no-gutters);
}

// distinct context
.distinct {
  @include pad(1 at 2, 3 at 6);
}

Bleed

mixin

• 语法格式: bleed($bleed)
• $bleed: TRBL

可以用来添加负向外边距和正向内边距，从而在不影响内容的前提下，让元素的边框和背景溢出容器的范围。

可以将 CSS TRBL 以简写形式描述任意方向的宽度。

// input
.example1 { @include bleed(1em); }
.example2 { @include bleed(1em 2 20px 5% of 8 .25); }

// output
.example1 {
  margin: -1em;
  padding: 1em;
}

.example2 {
  margin-top: -1em;
  padding-top: 1em;
  margin-right: -22.5%;
  padding-right: 22.5%;
  margin-bottom: -20px;
  padding-bottom: 20px;
  margin-left: -5%;
  padding-left: 5%;
}

如有可能，bleed 混合宏将会尝试保持间距。使用 no-gutters 关键字可以覆盖这一样式。

Bleed-x

mixin

• 语法格式: bleed-x($bleed)
• $bleed: LR

设置 bleed 水平方向样式的快捷方式。

// input
.example { @include bleed-x(1em 2em); }

// output
.example {
  margin-left: -1em;
  padding-left: 1em;
  margin-right: -2em;
  padding-right: 2em;
}

Bleed-y

mixin

• 语法格式: bleed-x($bleed)
• $bleed: TB

设置 bleed 垂直方向样式的快捷方式。

// input
.example { @include bleed-y(1em 2em); }

// output
.example {
  margin-top: -1em;
  padding-top: 1em;
  margin-bottom: -2em;
  padding-bottom: 2em;
}

Isolate

mixin

• 语法格式: isolate($isolate)
• $isolate: <span>

孤立布局是一种基于浮动样式的布局技巧，使用这种布局有助于修复子像素约取问题。在 Susy 中，可以在全局配置中设置这种布局，可以在 span 混合宏中以简写形式设置这种布局，还可以使用独立的混合宏。

可以使用标准的的简写形式作为 $isolate 参数。任意给定的长度和栅格索引都可以用来定位孤立元素（除非某些情况下使用了 at 标志）。该函数返回衣蛾长度值。

// input
.function {
  margin-left: isolate(2 of 7 .5 after);
}

// output
.function {
  margin-left: 15%;
}

该混合宏返回实现孤立布局所需的所有的属性：

// input
.mixin { @include isolate(25%); }

// output
.mixin {
  float: left;
  margin-left: 25%;
  margin-right: -100%;
}

Gallery

mixin

• 语法格式: gallery($span, $selector)
• $span:
• $selector: (nth-)child* | of-type

gallery 可以用来创建画廊样式的布局，最终会将大量的元素布局到统一的栅格中。使用 span 简写形式将样式应用到所有的元素身上，然后使用 nth-child 或 nth-of-type 选择器和孤立布局技巧来管理栅格中的元素。

// each img will span 3 of 12 columns,
// with 4 images in each row:
.gallery img {
  @include gallery(3 of 12);
}

Show Grid

mixin

• 语法格式: show-grid($grid)
• $grid:

添加关键字到容器混合宏中，是显示栅格最便捷的方式。如果需要将栅格分隔开，只需向 show-grid 混合宏传递准确的 layout 简写配置，即可显示调试的栅格图像，并将其作为背景或添加一个触发按钮。

body {
  @include container;
  @include show-grid(overlay);
}

提醒：栅格图片的位置有时并不精确。浏览器对于背景图片也有子像素约取错误。这意味着无法实现完美像素的尺寸，也意味着调试过程的艰难。预期中栅格图片 to 的方向（如果是从左到右布局流，那么 to 的方向就是 right）会有少许像素的偏移。

Breakpoint

Susy 内建了媒体查询功能，同时也允许来自 Breakpoint 插件的媒体查询功能。如果需要安装 Breakpoint，请其官方网站的说明文档。

Susy Breakpoint

mixin

• 语法格式: susy-breakpoint($query, $layout, $no-query)
• $query: media query shorthand (see susy-media)
• $layout:
• $no-query: | (see susy-media)

susy-breakpoint() 可以被认为是管理媒体查询断点的快捷方式，同时支持 susy-media 和第三方的 Breakpoint 插件。

如果你正在使用第三方插件，请详细阅读这两篇文章：Breakpoint: No Query Fallbacks 和 Breakpoint: Basic Media Queries。

这个混合宏更像是一个包裹容器，它会给内部嵌套的所有函数和混合宏添加媒体查询功能并修改布局配置。

@include susy-breakpoint(30em, 8) {
  // nested code uses an 8-column grid,
  // starting at a 30em min-width breakpoint…
  .example { @include span(3); }
}

Susy Media

mixin

• 语法格式: susy-media($query, $no-query)
• $query: [] | | |
• $no-query: |

susy-media 混合宏提供了基础的媒体查询功能，并被用来管理内建的 susy-breakpoint。

$query:单个长度参数会被解析为 min-query；两个长度参数会被分别解析为 min- 和 max- 宽度；键值对或者 map 形式的参数会被解析为 property: value；长字符串会被直接使用。

// 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) { /*…*/ }

$no-query:true 会让生成的 CSS 中不包含媒体查询语句。这对于创建样式独立的文件非常有用。

对于使用目标类的内部会掉，可以传递一个字符串（比如 “no-mqs”）作为回调选择器。最终的样式既可以生成在媒体查询中，也可以生成到既定的选择器中。

可以通过 $susy-media-fallback 变量将这一选项设为全局配置。

susy-media 也只支持对媒体查询进行命名，前提是需要使用 $susy-media 变量：

$susy-media: (
  min: 20em,
  max: 80em 60em,
  string: ‘screen and (orientation: landscape)’,
  pair: min-height 40em,
  map: (
    media: screen,
    max-width: 30em
  ),
);

@include susy-media(min);

自定义

Susy 建立在三个独立的模块之上：math，output 以及 syntax。math 和 output 模块是 Susy 的核心模块，所以被抽象出来为设计多种布局服务。这恰恰也是我们所需要的。

syntax 模块的作用是将所有的模块聚合起来。使用类似 syntax 模块的方式，你可以使用相同的标记结构和不同的 CSS 来主题化一个网站，当然也可以使用 SUsy 开发个人的布局语法。

不止如此，你也可以创建个人独特的语法，或者基于既有的 oocss、singularity、zurb、neat、zen、blueprint、960s 等等，实现相应的布局设计接口。当然，请不要抛弃如此优雅曼妙的 Susy。

核心配置

虽然 Susy 的模块可以用来创建各种布局，但是对于栅格布局只需要 math 模块即可实现。

Susy 的核心包括两个参数：纵列数量和间距。

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

$asymmetrical: (
  columns: (1 3 4 6 2),
  gutters: .5,
);

虽然纵列数量和间距都是无单位的数值，但由于它们与其他元素密切相关，所以你也可以称它们为“栅格单位”。1/4的间距等于纵列宽度的四分之一。

Is Symmetrical

如果栅格是不对称的，那么就返回 null。

• $colums:<number> | <list>

虽然下面的示例并不复杂，但是了解背后的处理思路非常重要：

// 源代码
$sym: is-symmetrical(12);
$asym: is-symmetrical(2 4 6 3);

// 生成代码
$sym: 12;
$asym: null;

Susy Count

获取既有布局的纵列数量。

• $colums:<number> | <list>

由于对称布局的纵列数量是固定的，所以这个方法对于不对称布局才有意义。但是为了实现弹性布局，对于对称/不对称布局都会做一定的处理。

<number>: Susy 的栅格布局由纵列来定义。在对称布局中，所有的栅格具有相同的宽度，所以可以使用精确的数值来定义布局，比如 8 列布局、12 列布局。

// 源代码
$count: susy-count(12);

// 生成代码
$count: 12;

<list>: 不对称栅格布局往往比较复杂。由于每一个栅格的宽度不尽相同，就需要我们提供更多的细节描述。我们可以使用一个列表来实现此类布局。列表中的每个数字都表示相对一个栅格单位的倍数。

// 源代码
$count: susy-count(1 2 4 3 1);

// 生成代码 
$count: 5;

对于不对称栅格布局，纵列数量等于列表长度。这倒不是多么复杂的数学计算。

Column Sum

获取布局中使用的总纵列数量。

• $colums:<number> | <list>
• $gutters: <ratio>
• $spread: false/narrow | wide | wider

susy-sum 函数永爱计算栅格单位的数量，而不是纵列的数量。计算所有的纵列以及其中的间距从而变成了一件简单的事情。

// 源代码
$susy-sum: susy-sum(7, .5);

// 输出: 7 + (6 * .5) = 10
$susy-sum: 10;

大多数的栅格中，往往间距比纵列少一条，但是这种设计并不完美。使用 spread 参数可以允许开发者在布局元素两侧添加间距。默认的 narrow 扩展方式将会减去一个间距，而 wide 扩展方式则会让间距和纵列具有形同的数量。

// input
$wide-sum: susy-sum(7, .5, wide);

// output: 7 + (7 * .5) = 10.5
$wide-sum: 10.5;

有时你会希望在布局元素两侧使用间距，那么就可以使用 wider 扩展方式。

// input
$wider-sum: susy-sum(7, .5, wider);

// output: 7 + (8 * .5) = 11
$wider-sum: 11;

上述扩展方式同样适用于不对称栅格布局。

// input
$susy-sum: susy-sum(1 2 4 2, 1/3);

// output: (1 + 2 + 4 + 2) + (3 * 1/3) = 10
$susy-sum: 10;

Column Span

根据定位给出纵列的一个子集。

• $span: <number>
• $location: <number>
• $columns: <number> | <list>

由于对称布局的子集等于布局元素，所以这个属性只对不对称栅格布局有意义。但是为了实现弹性布局，对于对称/不对称布局都会做一定的处理。

给定的 location 代表纵列的索引位置，从 1 开始计算。所以 1 代表了第一个纵列，2 代表了第二个纵列，以此类推。

// input
$sym-span: susy-span(3, 2, 7);
$asym-span: susy-span(3, 2, (1 2 3 5 4));

// output: 3 columns, starting with the second
$sym-span: 3;
$asym-span: (2 3 5);

Susy

获取给定片段的总数量。

• $span: <number>
• $location: <number>
• $columns: <number> | <list>
• $gutters: <ratio>
• $spread: false/narrow | wide | wider

就此来说，它是上述两个组合的集合。susy 是创建任意类型集合的基础。它在 susy-span 中聚合了 susy-sum，并返回给定片段的无单位宽度。

// input
$sym-span: susy(3, 2, 7, .5);
$asym-span: susy(3, 2, (1 2 3 5 4), .5);

// output
$sym-span: 4;
$asym-span: 11;

所以你所需要做的工作，只是给它添加一个单位，仅此而已。

Build Something New

上述就是创建栅格系统所需的一切了。剩下的就只是一些语法常识。从使用 susy() 开始：

$sum: susy(3, 2, 7);

如果你想创建一个固定宽度的布局，那么可以用单个纵列的宽度乘以数量即可实现。

// static
$column-width: 4em;
$static: $sum * $column-width;

如果你想创建一个流动布局，那么可以将布局上下文元素的跨度除以布局元素的数量，即可得到每个布局元素所占的百分比。

// fluid
$context: susy(7);
$fluid: percentage($sum / $context);

上述就是自定义布局所需要的一切了。现在，尝试给自己创建一个栅格布局吧！

本文根据Susy官方文档整理。

如需转载，烦请注明出处：http://www.w3cplus.com/preprocessor/susy-docs.html