_spacing.scss

$screen-small-min: 480px;
$screen-medium-min: 768px;
$screen-large-min: 992px;
$screen-xlarge-min: 1200px;

$form-element-height: 42px;

/* be consistent with spacing to avoid random pixel adding. */
$scale: 8, 16, 32, 48;

$mx-rules: 'margin-left', 'margin-right';
$my-rules: 'margin-top', 'margin-bottom';
$ml-rules: 'margin-left';
$mr-rules: 'margin-right';
$mb-rules: 'margin-bottom';
$mt-rules: 'margin-top';
$px-rules: 'padding-left', 'padding-right';
$py-rules: 'padding-top', 'padding-bottom';
$pl-rules: 'padding-left';
$pr-rules: 'padding-right';
$pb-rules: 'padding-bottom';
$pt-rules: 'padding-top';

@mixin add-space-rule($rules, $space) {
  @each $rule in $rules {
    #{$rule}: #{nth($scale, $space)}px !important;
  }
}

@mixin m($space) {
  margin: #{nth($scale, $space)}px !important;
}

@mixin p($space) {
  padding: #{nth($scale, $space)}px !important;
}

@mixin mx($space) {
  @include add-space-rule($mx-rules, $space);
}

@mixin my($space) {
  @include add-space-rule($my-rules, $space);
}

@mixin ml($space) {
  @include add-space-rule($ml-rules, $space);
}

@mixin mr($space) {
  @include add-space-rule($mr-rules, $space);
}

@mixin mt($space) {
  @include add-space-rule($mt-rules, $space);
}

@mixin mb($space) {
  @include add-space-rule($mb-rules, $space);
}

@mixin px($space) {
  @include add-space-rule($px-rules, $space);
}

@mixin py($space) {
  @include add-space-rule($py-rules, $space);
}

@mixin pt($space) {
  @include add-space-rule($pt-rules, $space);
}

@mixin pt($space) {
  @include add-space-rule($pt-rules, $space);
}

@mixin pl($space) {
  @include add-space-rule($pl-rules, $space);
}

@mixin pr($space) {
  @include add-space-rule($pr-rules, $space);
}

@mixin pb($space) {
  @include add-space-rule($pb-rules, $space);
}