From IT Skills
Jump to: navigation, search

http://susy.oddbird.net/

seems that Susy will not be supported in PostCSS

Install[edit | edit source]

The only requirement is Sass, but Susy was built to be part of the Compass ecosystem, and we recommend pairing with tools like Breakpoint and Vertical Rhythms.

https://www.sitepoint.com/sass-grids-neat-susy/[edit | edit source]

Susy Config[edit | edit source]

All your global settings for Susy are stored in a map called $susy. This makes it easy to keep your config data in one place. If you were going to generate a 12-column grid at 960px with 20px of gutter between each column, you’d use the following map:

@import "susy";
$susy: (
  columns: 12,
  gutters: .25,
  container: 960px,
  global-box-sizing: border-box
);
@include border-box-sizing;

gutters[edit | edit source]

The gutters value corresponds to a percentage of the full column width. Since 12 columns in a 960px container would be 80px each: therefore, .25 will give us a (rough) 20px gutter.

container() Mixin[edit | edit source]

The mixin container() will use the information in $susy and set up a container (clearfix, max-width, & centered) for your grid items. Its use is very straightforward:

.wrap {
  @include container;
}
.content {
  @include span(8); 
}
.sidebar {
  @include span(4 last); 
}

span() Mixin[edit | edit source]

To align child elements along the grid, use the span() mixin. This takes 3 parameters in Susy: span, location, layout.

.sidebar {
  @include span(5);
  // width = 5 columns of $susy: ( columns ) value
}
.sidebar {
  @include span(5 of 12);
  // width = 5/12 with margin specified by $susy: ( gutter )
}
.sidebar {
  @include span(5 at 8 of 12);
  // width = 5/12 with margin removed from right
  // because 5 col starting at 8 = last column
}
// The location parameter can also be written with keywords first and last 
.sidebar {
  @include span(5 last);
}

Responsive web design[edit | edit source]

Susy doesn’t come with a full built-in breakpoint manager; the developers behind it recommend using Breakpoint and provide susy-breakpoint() a helper mixin that calls Breakpoint:

@include susy-breakpoint(720px, 8) {
  // At a min-width of 720px, Susy will use a 8-col grid
  .responsive-grid-item {
    @include span(4);
  }
}