Container, Gutter, Breakpoints

Container-Gutter-Breakpoints.css

.container {
  padding: 15px;
}
@media screen and (min-width: 480px) {
  .container {
    padding: 30px;
  }
}
@media screen and (min-width: 640px) {
  .container {
    padding: 50px;
  }
}
@media screen and (min-width: 1024px) {
  .container {
    padding: 100px;
  }
}

Container-Gutter-Breakpoints.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

@mixin padding($fs-map, $fs-breakpoints: $breakpoints) {
  @each $fs-breakpoint, $gutter in $fs-map {
    @if $fs-breakpoint == null {
      padding: $gutter;
    }
    @else {
      // If $fs-font-size is a key that exists in
      // $fs-breakpoints, use the value
      @if map-has-key($fs-breakpoints, $fs-breakpoint) {
        $fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
      }
      @media screen and (min-width: $fs-breakpoint) {
        padding: $gutter;
      }
    }
  }
}


$breakpoints: (
  small : 480px,
  medium: 640px,
  large : 1024px
);

$gutter: (
  null  : 15px,
  small : 30px,
  medium: 50px,
  large : 100px
);

.container{
  @include padding($gutter);
}