aloverso
8/5/2019 - 7:49 PM

spacings.scss

spacings.scss

// padding and margin
$space_sizes:
  (l, 2em),    //large
  (m, 1.5em),  //medium
  (d, 1em),  //default
  (s, 0.5em),  //small
  (xs, 0.25em) //x-small
;
$orientation_list: (
  v,
  h
);
$direction_list: (
  (t, top),
  (r, right),
  (b, bottom),
  (l, left)
);

@each $space_sizes, $size in $space_sizes {
  .pa#{$space_sizes} {
    padding: $size;
  }
  .ma#{$space_sizes} {
    margin: $size;
  }
}
@each $direction_list, $direction in $direction_list {
  @each $space_sizes, $size in $space_sizes {
    .p#{$direction_list}#{$space_sizes} {
      padding-#{$direction}: $size;
    }
    .m#{$direction_list}#{$space_sizes} {
      margin-#{$direction}: $size;
    }
  }
}
@each $orientation_list, $orientation in $orientation_list {
  @each $space_sizes, $size in $space_sizes {
    @if $orientation_list == "v" {
      .p#{$orientation_list}#{$space_sizes} {
        padding-bottom: $size;
        padding-top: $size;
      }
      .m#{$orientation_list}#{$space_sizes} {
        margin-bottom: $size;
        margin-top: $size;
      }
    }
    @else if $orientation_list == "h" {
      .p#{$orientation_list}#{$space_sizes} {
        padding-left: $size;
        padding-right: $size;
      }
      .m#{$orientation_list}#{$space_sizes} {
        margin-left: $size;
        margin-right: $size;
      }
    }
  }
}