Susy 2 中重要的混合宏和函数
最后更新于：2022-04-01 01:53:05
在使用 Susy 2 创建栅格前，让我们先来了解一些非常重要的混合宏和函数。如果你理解了这些，那么就一定可以使用 Susy 来创建任何任何栅格。
### container 混合宏
要想运用 Susy 魔幻般的计算力量，第一件需要做的事就是定义 `container`。
~~~
// The Container Mixin
@include container( [<length>] );
// Note: Optional arguments are enclosed in []
~~~
`container` 混合宏拥有一个可选的长度参数，用来设置最外层容器的最大宽度。如果该参数缺失，默认使用 `max-width:100%`来代替。
如果你要使用固定宽度的栅格布局，那么可以使用 Susy 自动计算最大宽度。
为了保证 Susy 的有效计算，请将这个参数保持空缺：
~~~
@include container;
~~~
### Span (Mixin)
spay 混合宏是 Susy 进行布局的核心元素，[它让栅格表现的极其灵活](http://susydocs.oddbird.net/en/latest/toolkit/#span-mixin)。
我通常按照 Susy 的官方方式实现自己的布局：
~~~
@include span( <width> [<wide / wider>] of <layout> [<last>] );
~~~
如果使用过 Susy 1，那么就会发现它非常类似 `span-column` 混合宏，两者只有极少的差异。
下面我来详细解释下其中的参数：
* `<width>` 表示该元素布局的列数。
* `[<wide / wider>]` 是一个可选参数，允许你扩展当前的列宽，以增加一边或两边的间距。
* `<layout>` 是容器的上下文环境，需要其他定义当前布局的可选参数配合使用（上下文环境表示的是父级容器的列数）。
* `[<last>]` 是一个可选参数，用来通知 Susy 该元素为一行的最后一个元素。
下面是一个具体的例子：
~~~
// This has a width of 3 columns + 1 gutter, out of 9 columns and is supposed to be the last item within the context.
.some-selector {
@include span(3 wide of 9 last);
}
~~~
### Span (Function)
`span` 函数非常类似 `span` 混合宏，唯一不同的一点在于该函数只返回元素的宽度。在这个函数中只能使用 `<width>`,`<wide/ wider>` 和 `<layout>` 参数。
~~~
// This has a width of 3 columns out of 9 columns
.some-selector {
width: span(3 of 9);
}
~~~
使用 `span` 函数，让所有的工作轻松多了，无需再去记忆各种外边距内边距之类的细节问题。使用它，你就能得到恰当的宽度。
~~~
// This has a padding of 1 column out of 9 columns
.some-selector {
padding-left: span(1 of 9);
}
~~~
### Gutter 函数
`gutter` 函数只有一个参数—— `context`（上下文环境）。
~~~
// This outputs margin that equals to 1 gutter width in a 9 column layout
.some-selector {
margin-right: gutter(9);
}
~~~
上述就是使用 Susy 2 必须要掌握的核心功能。