Susy Grids - Useful Snippets

susy-grids-useful-snippets.scss

// Default susy sass map of configuration options.
// These are the defaults. More information can be found here: http://susy.readthedocs.org/en/latest/settings/
$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,
  )
);



// Below are examples of some simple ways to use susy to set widths of elements, and gutters of elements:

// SPAN MIXIN
// Default usage of susy span mixin:
.container {
 .left {
  @include span(4 of 12); // Tell the left container to be 4 of 12 rows wide
 }
 .right {
  @include span(8 of 12 last); // Tell the left container to be 8 of 12 rows wide. Use the last argument to exclude the default left margin gutter on this element
 }
}

// SPAN MIXIN WITH ALTERNATE GUTTER TREATMENT
// Using susy span mixin with alternate gutter position defined:
.container {
 .left {
  @include span(4 of 12 $inside-gutters); // Tell the left container to be 4 of 12 rows wide
 }
 .right {
  @include span(8 of 12 $inside-gutters); // Tell the left container to be 8 of 12 rows wide. Since we are using inside-gutters the 'last' argument is not required (since inside-gutters uses left and right padding as gutters, instead of right margin)
 }
}

// SPAN FUNCTION
// Using the span function, instead of the span mixin, to have more control over the width:
.container {
 .left {
  width: span(4);
  float: left;
 }
 .right {
  width: span(8);
  float: left;
 }
}


// Bleed - to make a container that completely fills the grid without gutters, use the bleed function to add negative left and right margins
.some-div {
  @include bleed($grid-padding);
}

// Breakpoints - make the Susy grid use different numbers of columns at different breakpoints
// Passing your different layouts as arguments
$small-columns: 4
$medium-columns: 8

$small: $small-columns (77px 20px) split show;
$medium: $medium-columns (77px 20px) split show;

.container {
  @include container($small);
  @include breakpoint(768px) {
    @include container($medium);
  }
}

.left-column {
  @include span(2 of $small);
  @include breakpoint(768px) {
    @include span(4 of $medium);
  }
}

// Breakpoints - make the Susy grid use different numbers of columns at different breakpoints
// With the use-grid() mixin:
.left-column {
  @include span(2);
  @include breakpoint(768px) {
    @include use-grid($medium) {
      @include span(4);
      // everything nested in here will use the medium grid...
    }
  }
}