Susy to neat

[rob-bar]

scss/utils/variables/_neat.scss

// BREAKPOINTS
@import "neat-helpers";

$zero: 0;
$mobile: 480px;
$tablet: 768px;
$ninesixty: 960px;
$desktop: 1170px;
$max: 1200px;

$breakpoints: (
  zero:  new-breakpoint($zero, 4),
  mobile: new-breakpoint($mobile, 8),
  tablet:  new-breakpoint($tablet, 8),
  ninesixty: new-breakpoint($ninesixty, 12),
  desktop: new-breakpoint($desktop, 12),
  max: new-breakpoint($max, 12)
);

$breakpoint-ratios: (
  mobile: .6,
  tablet:  .75,
  desktop: 1,
  max: 1.25
);

// NEAT SETTINGS
$disable-warnings: false;
$grid-columns: 12;

$column: modular-scale(3, 1em, $golden);
$gutter: modular-scale(1, .5em, $golden);

$max-width: em(1170);
$border-box-sizing: false;
$default-feature: min-width;
$default-layout-direction: LTR;

$visual-grid: true;
$visual-grid-color: red;
$visual-grid-index: front;
$visual-grid-opacity: .1;

scss/utils/mixins/_grid.scss

@mixin grid($i, $container: true) {
  @if $container {
    @include outer-container();
  }

  > * {
    @include span-columns($grid-columns / $i);
    @include omega(#{$i}n);

    &:nth-child(#{$i}n+1) {
      clear: both;
    }
  }
}

@mixin padded-container($padding: rh(1)) {
  @include outer-container();
  padding: 0 $padding;
}

scss/utils/classes/_grid.scss

@for $i from 1 through $grid-columns {
  .w#{$i} {
    @include span-columns($i);
  }
}

$grids: (1, 2, 3, 4, 6);
@each $i in $grids {
  .grid-#{$i} {
    @include grid($i);
  }
}

.latest {
  @include omega(auto);
}

.container {
  @include outer-container();
  padding: 0 rh(.4);
}

.tablet-container {
  @include media(mg($breakpoints, tablet)) {
    @include outer-container();
    padding: 0 rh(1);
  }
}

.desktop-container {
  @include media(mg($breakpoints, desktop)) {
    @include outer-container();
    padding: 0 rh(1);
  }
}

.max-container {
  @include pie-clearfix;

  @include media(mg($breakpoints, max)) {
    @include outer-container();
    padding: 0 rh(1);
  }
}

[sqndr]

Done in #44, using the example from above. Thanks @rob-bar !