Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----



$s-gutter: 32px;
$s-gutter-xlarge : 3.5*$s-gutter;
$s-gutter-large  : 3*$s-gutter;
$s-gutter-medium : 2*$s-gutter;
$s-gutter-small  : 1*$s-gutter;
$s-gutter-xsmall : $s-gutter/2;

$sizes: "" "-xsmall" "-small" "-medium" "-large" "-xlarge";

@function space($size) {
  @if $size == "" {
    @return $s-gutter;
  } @else if $size == "-xsmall" {
    @return $s-gutter-xsmall;
  } @else if $size == "-small" {
    @return $s-gutter-small;
  } @else if $size == "-medium" {
    @return $s-gutter-medium;
  } @else if $size == "-large" {
    @return $s-gutter-large;
  } @else if $size == "-xlarge" {
    @return $s-gutter-xlarge;
  }
  @return $s-gutter;
}


@each $size in $sizes {
  .l-spacing-v#{$size} {
    padding-top    : space($size);
    padding-bottom : space($size);
  }
  .l-spacing-h#{$size} {
    padding-left   : space($size);
    padding-right  : space($size);
  }
  .l-spacing-t#{$size} { padding-top    : space($size); }
  .l-spacing-b#{$size} { padding-bottom : space($size); }
  .l-spacing-l#{$size} { padding-left   : space($size); }
  .l-spacing-r#{$size} { padding-right  : space($size); }
}

SassMeister-output.css

.l-spacing-v {
  padding-top: 32px;
  padding-bottom: 32px;
}

.l-spacing-h {
  padding-left: 32px;
  padding-right: 32px;
}

.l-spacing-t {
  padding-top: 32px;
}

.l-spacing-b {
  padding-bottom: 32px;
}

.l-spacing-l {
  padding-left: 32px;
}

.l-spacing-r {
  padding-right: 32px;
}

.l-spacing-v-xsmall {
  padding-top: 16px;
  padding-bottom: 16px;
}

.l-spacing-h-xsmall {
  padding-left: 16px;
  padding-right: 16px;
}

.l-spacing-t-xsmall {
  padding-top: 16px;
}

.l-spacing-b-xsmall {
  padding-bottom: 16px;
}

.l-spacing-l-xsmall {
  padding-left: 16px;
}

.l-spacing-r-xsmall {
  padding-right: 16px;
}

.l-spacing-v-small {
  padding-top: 32px;
  padding-bottom: 32px;
}

.l-spacing-h-small {
  padding-left: 32px;
  padding-right: 32px;
}

.l-spacing-t-small {
  padding-top: 32px;
}

.l-spacing-b-small {
  padding-bottom: 32px;
}

.l-spacing-l-small {
  padding-left: 32px;
}

.l-spacing-r-small {
  padding-right: 32px;
}

.l-spacing-v-medium {
  padding-top: 64px;
  padding-bottom: 64px;
}

.l-spacing-h-medium {
  padding-left: 64px;
  padding-right: 64px;
}

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

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

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

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

.l-spacing-v-large {
  padding-top: 96px;
  padding-bottom: 96px;
}

.l-spacing-h-large {
  padding-left: 96px;
  padding-right: 96px;
}

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

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

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

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

.l-spacing-v-xlarge {
  padding-top: 112px;
  padding-bottom: 112px;
}

.l-spacing-h-xlarge {
  padding-left: 112px;
  padding-right: 112px;
}

.l-spacing-t-xlarge {
  padding-top: 112px;
}

.l-spacing-b-xlarge {
  padding-bottom: 112px;
}

.l-spacing-l-xlarge {
  padding-left: 112px;
}

.l-spacing-r-xlarge {
  padding-right: 112px;
}