[Susy2] Susy2 Toolkit (mixin)

Susy が用意した mixin のこと。メモ的に。

[markdown]

## Padding

[Padding](http://susydocs.oddbird.net/en/latest/toolkit/#padding) 用の mixin。

* Prefix
* Suffix
* Pad

“`css
.contents {
@include span(8 at 5);
@include pad(10px);
}
.aside {
@include span(4);
@include pad(10px);
}
“`

要素の左右に padding: 10px します。

## Margins

[Margins](http://susydocs.oddbird.net/en/latest/toolkit/#margins) 用の mixin。

* Post
* Pull
* Squish

“`css
.aside {
@include span(4);
@include pull(100px);
}
“`

要素をネガティブマージンとして -100px 左へレイアウトします。

## Bleed

[Bleed](http://susydocs.oddbird.net/en/latest/toolkit/#bleed)

> Apply negative margins and equal positive padding, so that element borders and backgrounds “bleed” outside of their containers, without the content be affected.

“`css
.aside {
@include span(4);
@include bleed(20px);
}
“`

## Gallery

[Gallery](http://susydocs.oddbird.net/en/latest/toolkit/#gallery)

> Gallery is a shortcut for creating gallery-style layouts, where a large number of elements are layed out on a consistent grid. We take the standard span shorthand and apply it to all the elements, using nth-child or nth-of-type selectors and the isolation technique to arrange them on the grid.

“`css
.gallery img {
@include gallery(6 of 12);
@include breakpoint($large) {
@include gallery(3 of 12);
}
}
“`
[/markdown]