Susy2 Toolkit (mixin)

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

Contents

Padding

Padding 用の mixin。

Prefix
Suffix
Pad

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

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

Margins

Margins 用の mixin。

Post
Pull
Squish

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

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

Bleed

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

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

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.

.gallery img {
  @include gallery(6 of 12);
  @include breakpoint($large) {
    @include gallery(3 of 12);
  }
}