Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.1.0-beta)
// ----

// breakpoints

$small: 600px;
$medium: 800px;
$large: 1000px;

$breakpoints: ( 
  'small' '(min-width: #{$small})', 
  'medium' '(min-width: #{$medium})', 
  'large' '(min-width: #{$large})'
);

// spacings

$spacing: (
  'none': 0,
  'small': (
    'small': 10px,
    'medium': 11px,
    'large': 12px
  ), 
  'medium': 20px, 
  'large': 30px
);

@mixin create_breakpoint_modifier($map, $block, $attr){
  @if type-of($map) == 'map' {
    @each $attribute, $value in $map {
      .#{$block}--#{$attribute} {
        @each $attr in $attr {
          @if type-of($value) == 'map' {
            #{$attr}: nth(nth($value, 1), 2);
            @each $breakpoint in $breakpoints {
              $name: nth($breakpoint, 1);
              $declaration: nth($breakpoint, 2);
              @media only screen and #{$declaration} {
                #{$attr}: map-get($value, $name);
              }
            }
          }
          @else {
            #{$attr}: $value;
          }
        }
      }
    }
    @each $breakpoint in $breakpoints {
      $name: nth($breakpoint, 1);
      $declaration: nth($breakpoint, 2);
      @media only screen and #{$declaration} {
        @each $modifier, $value in $map {
          .#{$name}--#{$block}--#{$modifier} {
            @each $attr in $attr {
              @if type-of($value) == 'map' {
                #{$attr}: map-get($value, $name);
              }
              @else {
                #{$attr}: $value;
              }
            }
          }
        }
      }
    }
  }
}

@include create_breakpoint_modifier($spacing, 'spacing-t', 'padding-top');
@include create_breakpoint_modifier($spacing, 'spacing-b', 'padding-bottom');
@include create_breakpoint_modifier($spacing, 'spacing-l', 'padding-left');
@include create_breakpoint_modifier($spacing, 'spacing-r', 'padding-right');
@include create_breakpoint_modifier($spacing, 'spacing-t-b', ('padding-top', 'padding-bottom'));
@include create_breakpoint_modifier($spacing, 'spacing-l-r', ('padding-left', 'padding-right'));

SassMeister-output.css

.spacing-t--none {
  padding-top: 0; }

.spacing-t--small {
  padding-top: 10px; }
  @media only screen and (min-width: 600px) {
    .spacing-t--small {
      padding-top: 10px; } }
  @media only screen and (min-width: 800px) {
    .spacing-t--small {
      padding-top: 11px; } }
  @media only screen and (min-width: 1000px) {
    .spacing-t--small {
      padding-top: 12px; } }

.spacing-t--medium {
  padding-top: 20px; }

.spacing-t--large {
  padding-top: 30px; }

@media only screen and (min-width: 600px) {
  .small--spacing-t--none {
    padding-top: 0; }
  .small--spacing-t--small {
    padding-top: 10px; }
  .small--spacing-t--medium {
    padding-top: 20px; }
  .small--spacing-t--large {
    padding-top: 30px; } }

@media only screen and (min-width: 800px) {
  .medium--spacing-t--none {
    padding-top: 0; }
  .medium--spacing-t--small {
    padding-top: 11px; }
  .medium--spacing-t--medium {
    padding-top: 20px; }
  .medium--spacing-t--large {
    padding-top: 30px; } }

@media only screen and (min-width: 1000px) {
  .large--spacing-t--none {
    padding-top: 0; }
  .large--spacing-t--small {
    padding-top: 12px; }
  .large--spacing-t--medium {
    padding-top: 20px; }
  .large--spacing-t--large {
    padding-top: 30px; } }

.spacing-b--none {
  padding-bottom: 0; }

.spacing-b--small {
  padding-bottom: 10px; }
  @media only screen and (min-width: 600px) {
    .spacing-b--small {
      padding-bottom: 10px; } }
  @media only screen and (min-width: 800px) {
    .spacing-b--small {
      padding-bottom: 11px; } }
  @media only screen and (min-width: 1000px) {
    .spacing-b--small {
      padding-bottom: 12px; } }

.spacing-b--medium {
  padding-bottom: 20px; }

.spacing-b--large {
  padding-bottom: 30px; }

@media only screen and (min-width: 600px) {
  .small--spacing-b--none {
    padding-bottom: 0; }
  .small--spacing-b--small {
    padding-bottom: 10px; }
  .small--spacing-b--medium {
    padding-bottom: 20px; }
  .small--spacing-b--large {
    padding-bottom: 30px; } }

@media only screen and (min-width: 800px) {
  .medium--spacing-b--none {
    padding-bottom: 0; }
  .medium--spacing-b--small {
    padding-bottom: 11px; }
  .medium--spacing-b--medium {
    padding-bottom: 20px; }
  .medium--spacing-b--large {
    padding-bottom: 30px; } }

@media only screen and (min-width: 1000px) {
  .large--spacing-b--none {
    padding-bottom: 0; }
  .large--spacing-b--small {
    padding-bottom: 12px; }
  .large--spacing-b--medium {
    padding-bottom: 20px; }
  .large--spacing-b--large {
    padding-bottom: 30px; } }

.spacing-l--none {
  padding-left: 0; }

.spacing-l--small {
  padding-left: 10px; }
  @media only screen and (min-width: 600px) {
    .spacing-l--small {
      padding-left: 10px; } }
  @media only screen and (min-width: 800px) {
    .spacing-l--small {
      padding-left: 11px; } }
  @media only screen and (min-width: 1000px) {
    .spacing-l--small {
      padding-left: 12px; } }

.spacing-l--medium {
  padding-left: 20px; }

.spacing-l--large {
  padding-left: 30px; }

@media only screen and (min-width: 600px) {
  .small--spacing-l--none {
    padding-left: 0; }
  .small--spacing-l--small {
    padding-left: 10px; }
  .small--spacing-l--medium {
    padding-left: 20px; }
  .small--spacing-l--large {
    padding-left: 30px; } }

@media only screen and (min-width: 800px) {
  .medium--spacing-l--none {
    padding-left: 0; }
  .medium--spacing-l--small {
    padding-left: 11px; }
  .medium--spacing-l--medium {
    padding-left: 20px; }
  .medium--spacing-l--large {
    padding-left: 30px; } }

@media only screen and (min-width: 1000px) {
  .large--spacing-l--none {
    padding-left: 0; }
  .large--spacing-l--small {
    padding-left: 12px; }
  .large--spacing-l--medium {
    padding-left: 20px; }
  .large--spacing-l--large {
    padding-left: 30px; } }

.spacing-r--none {
  padding-right: 0; }

.spacing-r--small {
  padding-right: 10px; }
  @media only screen and (min-width: 600px) {
    .spacing-r--small {
      padding-right: 10px; } }
  @media only screen and (min-width: 800px) {
    .spacing-r--small {
      padding-right: 11px; } }
  @media only screen and (min-width: 1000px) {
    .spacing-r--small {
      padding-right: 12px; } }

.spacing-r--medium {
  padding-right: 20px; }

.spacing-r--large {
  padding-right: 30px; }

@media only screen and (min-width: 600px) {
  .small--spacing-r--none {
    padding-right: 0; }
  .small--spacing-r--small {
    padding-right: 10px; }
  .small--spacing-r--medium {
    padding-right: 20px; }
  .small--spacing-r--large {
    padding-right: 30px; } }

@media only screen and (min-width: 800px) {
  .medium--spacing-r--none {
    padding-right: 0; }
  .medium--spacing-r--small {
    padding-right: 11px; }
  .medium--spacing-r--medium {
    padding-right: 20px; }
  .medium--spacing-r--large {
    padding-right: 30px; } }

@media only screen and (min-width: 1000px) {
  .large--spacing-r--none {
    padding-right: 0; }
  .large--spacing-r--small {
    padding-right: 12px; }
  .large--spacing-r--medium {
    padding-right: 20px; }
  .large--spacing-r--large {
    padding-right: 30px; } }

.spacing-t-b--none {
  padding-top: 0;
  padding-bottom: 0; }

.spacing-t-b--small {
  padding-top: 10px;
  padding-bottom: 10px; }
  @media only screen and (min-width: 600px) {
    .spacing-t-b--small {
      padding-top: 10px; } }
  @media only screen and (min-width: 800px) {
    .spacing-t-b--small {
      padding-top: 11px; } }
  @media only screen and (min-width: 1000px) {
    .spacing-t-b--small {
      padding-top: 12px; } }
  @media only screen and (min-width: 600px) {
    .spacing-t-b--small {
      padding-bottom: 10px; } }
  @media only screen and (min-width: 800px) {
    .spacing-t-b--small {
      padding-bottom: 11px; } }
  @media only screen and (min-width: 1000px) {
    .spacing-t-b--small {
      padding-bottom: 12px; } }

.spacing-t-b--medium {
  padding-top: 20px;
  padding-bottom: 20px; }

.spacing-t-b--large {
  padding-top: 30px;
  padding-bottom: 30px; }

@media only screen and (min-width: 600px) {
  .small--spacing-t-b--none {
    padding-top: 0;
    padding-bottom: 0; }
  .small--spacing-t-b--small {
    padding-top: 10px;
    padding-bottom: 10px; }
  .small--spacing-t-b--medium {
    padding-top: 20px;
    padding-bottom: 20px; }
  .small--spacing-t-b--large {
    padding-top: 30px;
    padding-bottom: 30px; } }

@media only screen and (min-width: 800px) {
  .medium--spacing-t-b--none {
    padding-top: 0;
    padding-bottom: 0; }
  .medium--spacing-t-b--small {
    padding-top: 11px;
    padding-bottom: 11px; }
  .medium--spacing-t-b--medium {
    padding-top: 20px;
    padding-bottom: 20px; }
  .medium--spacing-t-b--large {
    padding-top: 30px;
    padding-bottom: 30px; } }

@media only screen and (min-width: 1000px) {
  .large--spacing-t-b--none {
    padding-top: 0;
    padding-bottom: 0; }
  .large--spacing-t-b--small {
    padding-top: 12px;
    padding-bottom: 12px; }
  .large--spacing-t-b--medium {
    padding-top: 20px;
    padding-bottom: 20px; }
  .large--spacing-t-b--large {
    padding-top: 30px;
    padding-bottom: 30px; } }

.spacing-l-r--none {
  padding-left: 0;
  padding-right: 0; }

.spacing-l-r--small {
  padding-left: 10px;
  padding-right: 10px; }
  @media only screen and (min-width: 600px) {
    .spacing-l-r--small {
      padding-left: 10px; } }
  @media only screen and (min-width: 800px) {
    .spacing-l-r--small {
      padding-left: 11px; } }
  @media only screen and (min-width: 1000px) {
    .spacing-l-r--small {
      padding-left: 12px; } }
  @media only screen and (min-width: 600px) {
    .spacing-l-r--small {
      padding-right: 10px; } }
  @media only screen and (min-width: 800px) {
    .spacing-l-r--small {
      padding-right: 11px; } }
  @media only screen and (min-width: 1000px) {
    .spacing-l-r--small {
      padding-right: 12px; } }

.spacing-l-r--medium {
  padding-left: 20px;
  padding-right: 20px; }

.spacing-l-r--large {
  padding-left: 30px;
  padding-right: 30px; }

@media only screen and (min-width: 600px) {
  .small--spacing-l-r--none {
    padding-left: 0;
    padding-right: 0; }
  .small--spacing-l-r--small {
    padding-left: 10px;
    padding-right: 10px; }
  .small--spacing-l-r--medium {
    padding-left: 20px;
    padding-right: 20px; }
  .small--spacing-l-r--large {
    padding-left: 30px;
    padding-right: 30px; } }

@media only screen and (min-width: 800px) {
  .medium--spacing-l-r--none {
    padding-left: 0;
    padding-right: 0; }
  .medium--spacing-l-r--small {
    padding-left: 11px;
    padding-right: 11px; }
  .medium--spacing-l-r--medium {
    padding-left: 20px;
    padding-right: 20px; }
  .medium--spacing-l-r--large {
    padding-left: 30px;
    padding-right: 30px; } }

@media only screen and (min-width: 1000px) {
  .large--spacing-l-r--none {
    padding-left: 0;
    padding-right: 0; }
  .large--spacing-l-r--small {
    padding-left: 12px;
    padding-right: 12px; }
  .large--spacing-l-r--medium {
    padding-left: 20px;
    padding-right: 20px; }
  .large--spacing-l-r--large {
    padding-left: 30px;
    padding-right: 30px; } }