Cacher is the code snippet organizer for pro developers

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

@mixin container-padding($fs-map, $fs-breakpoints: $breakpoints) {
  @each $fs-breakpoint, $gutter in $fs-map {
    @if $fs-breakpoint == null {
      padding: $gutter;
      margin: $gutter;
    }
    @else {
      @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;
        margin: $gutter;
      }
    }
  }
}

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

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

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


.container, .xs, .sm{
  @include container-padding($gutter);
}

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