Grid offset mixin

foundation-grid-columns-mixin

@mixin grid-offset(
    // Mobile First Media Queries
        $small-up-screens: false,
       $medium-up-screens: false,
        $large-up-screens: false,
       $xlarge-up-screens: false,
      $xxlarge-up-screens: false,
  // Specific Range Media Queries
      $small-only-screens: false,
     $medium-only-screens: false,
      $large-only-screens: false,
     $xlarge-only-screens: false,
    $xxlarge-only-screens: false ){
  
  //
  // Mobile First Media Queries
  // 
 
  // Small and up screens  
  @if $small-up-screens {
    margin-#{$default-float}: grid-calc($small-up-screens, $total-columns) !important; 
  }
  
  // Medium and up screens
  @if $medium-up-screens {
    @media #{$medium-up} {
      margin-#{$default-float}: grid-calc($medium-up-screens, $total-columns) !important;
    }
  }
 
  // Large and up screens
  @if $large-up-screens {
    @media #{$large-up} {
      margin-#{$default-float}: grid-calc($large-up-screens, $total-columns) !important;
    }
  }
  
  // XLarge and up screens
  @if $xlarge-up-screens {
    @media #{$xlarge-up} {
      margin-#{$default-float}: grid-calc($xlarge-up-screens, $total-columns) !important;
    }
  }
 
  // XXLarge and up screens
  @if $xxlarge-up-screens {
    @media #{$xxlarge-up} {
      margin-#{$default-float}: grid-calc($xxlarge-up-screens, $total-columns) !important;
    }
  }
  
  //
  // Specific Range Media Queries
  //
 
  // Small only screens  
  @if $small-only-screens {
    @media #{$small-only} {
      margin-#{$default-float}: grid-calc($small-only-screens, $total-columns) !important;
    }
  }
  
  // Medium only screens
  @if $medium-only-screens {
    @media #{$medium-only} {
      margin-#{$default-float}: grid-calc($medium-only-screens, $total-columns) !important;
    }
  }
 
  // Large only screens
  @if $large-only-screens {
    @media #{$large-only} {
      margin-#{$default-float}: grid-calc($large-only-screens, $total-columns) !important;
    }
  }
  
  // XLarge only screens
  @if $xlarge-only-screens {
    @media #{$xlarge-only} {
      margin-#{$default-float}: grid-calc($xlarge-only-screens, $total-columns) !important;
    }
  }
 
  // XXLarge only screens
  @if $xxlarge-only-screens {
    @media #{$xxlarge-only} {
      margin-#{$default-float}: grid-calc($xxlarge-only-screens, $total-columns) !important;
    }
  }
}

Adapted https://gist.github.com/macbleser/c53cc54e10201cf37a2a to set offsets by breakpoint, could be easily modified to do $last-column, $center, $push, $pull, $collapse or $float instead of offset

A quick bit of testing shows that this produces duplicate CSS when used to compliment the grid-columns mixin. I have changed it to to provide the margin offset only

Mixin that sets both columns and offset is here - https://gist.github.com/webdevian/354096545435c6ed4c00