Sass padding and margin utilities

_utility.spacing.scss

/*
Spacing
- - - - - - - - - - - - - - - - - - - - - - - - -

Helper classes for spacing like margin and padding.

Class names follow this convention:

    .[type][direction][size]

* type: `p` for `padding`, `m` for `margin`
* direction: `v` for vertical, `h` for horizontal, `t` for top, `l` for left etc.
* size: `+` for large, `++` for huge, `-` for small, `--` for tiny

Examples:

* `p++` will give you a huge (`++`) padding (`p`)
* `mb0` will give you zero margin (`m`) bottom (`b`)
* `mv+` will give you a large (`+`) vertical (`v`) margin (`m`)

You can also limit to which screen sizes padding or margin will be applied by prefixing breakpoint name, e.g. `small-mh0`,
`medium-mh`, `large-mh+`

*/


// generates all directional variants for the specified size (e.g. p, ph, pv, pt, pb, pl, pr)
@mixin generate-directions($class-prefix, $class-postfix, $property, $size) {
  .#{$class-prefix}#{$class-postfix} { #{$property}: $size !important; }
  .#{$class-prefix}h#{$class-postfix} { #{$property}-left: $size !important; #{$property}-right: $size !important;}
  .#{$class-prefix}v#{$class-postfix} { #{$property}-top: $size !important; #{$property}-bottom: $size !important;}
  .#{$class-prefix}t#{$class-postfix} { #{$property}-top: $size !important;}
  .#{$class-prefix}b#{$class-postfix} { #{$property}-bottom: $size !important;}
  .#{$class-prefix}l#{$class-postfix} { #{$property}-left: $size !important;}
  .#{$class-prefix}r#{$class-postfix} { #{$property}-right: $size !important;}
}

// generates all sizes for the specified property
@mixin generate-spacing-classes($class-prefix, $padding, $margin) {
  $padding-small: $padding / 2;
  $padding-tiny: $padding / 4;
  $padding-large: $padding * 1.5;
  $padding-huge: $padding * 2;

  @include generate-directions(#{$class-prefix}p, null, padding, $padding);
  @include generate-directions(#{$class-prefix}p, \-, padding, ($padding-small));
  @include generate-directions(#{$class-prefix}p, \-\-, padding, ($padding-tiny));
  @include generate-directions(#{$class-prefix}p, \+, padding, ($padding-large));
  @include generate-directions(#{$class-prefix}p, \+\+, padding, ($padding-huge));
  @include generate-directions(#{$class-prefix}p, 0, padding, 0);

  $margin-small: $margin / 2;
  $margin-tiny: $margin / 4;
  $margin-large: $margin * 1.5;
  $margin-huge: $margin * 2;

  @include generate-directions(#{$class-prefix}m, null, margin, $margin);
  @include generate-directions(#{$class-prefix}m, \-, margin, ($margin-small));
  @include generate-directions(#{$class-prefix}m, \-\-, margin, ($margin-tiny));
  @include generate-directions(#{$class-prefix}m, \+, margin, ($margin-large));
  @include generate-directions(#{$class-prefix}m, \+\+, margin, ($margin-huge));
  @include generate-directions(#{$class-prefix}m, 0, margin, 0);
}

@include generate-spacing-classes(null, 20px, 20px);