Whitespace helpers

whitespace.scss

$breakpoints: xs, sm, md, lg;
@each $breakpoint in $breakpoints {
  @for $i from 0 through 10 {
    $distance: $i * 15;
    $breakpointInPixels: 0;

    @if $breakpoint == sm {
      $breakpointInPixels: 768;
    } @else if $breakpoint == md {
      $breakpointInPixels: 992;
    } @else if $breakpoint == lg {
      $breakpointInPixels: 1200;
    }

    @media (min-width: #{$breakpointInPixels}px) {

      .margin-#{$i}-#{$breakpoint} {
        margin: #{$distance}px;
      }

      .margin-top-#{$i}-#{$breakpoint} {
        margin-top: #{$distance}px;
      }

      .margin-right-#{$i}-#{$breakpoint} {
        margin-right: #{$distance}px;
      }

      .margin-bottom-#{$i}-#{$breakpoint} {
        margin-bottom: #{$distance}px;
      }

      .margin-left-#{$i}-#{$breakpoint} {
        margin-left: #{$distance}px;
      }

      .padding-#{$i}-#{$breakpoint} {
        padding: #{$distance}px;
      }

      .padding-top-#{$i}-#{$breakpoint} {
        padding-top: #{$distance}px;
      }

      .padding-right-#{$i}-#{$breakpoint} {
        padding-right: #{$distance}px;
      }

      .padding-bottom-#{$i}-#{$breakpoint} {
        padding-bottom: #{$distance}px;
      }

      .padding-left-#{$i}-#{$breakpoint} {
        padding-left: #{$distance}px;
      }
    }
  }
}

@for $i from 0 through 10 {
  $distance: $i * 15;
  .margin-#{$i} {
    margin: #{$distance}px;
  }

  .margin-top-#{$i} {
    margin-top: #{$distance}px;
  }

  .margin-right-#{$i} {
    margin-right: #{$distance}px;
  }

  .margin-bottom-#{$i} {
    margin-bottom: #{$distance}px;
  }

  .margin-left-#{$i} {
    margin-left: #{$distance}px;
  }

  .padding-#{$i} {
    padding: #{$distance}px;
  }

  .padding-top-#{$i} {
    padding-top: #{$distance}px;
  }

  .padding-right-#{$i} {
    padding-right: #{$distance}px;
  }

  .padding-bottom-#{$i} {
    padding-bottom: #{$distance}px;
  }

  .padding-left-#{$i} {
    padding-left: #{$distance}px;
  }
}