Element UI Spacing Utilities

_mixins.scss

@mixin res($key, $map: $--breakpoints) {
  // 循环断点Map，如果存在则返回
  @if map-has-key($map, $key) {
    @media only screen and #{inspect(map-get($map, $key))} {
      @content;
    }
  } @else {
    @warn "Undefeined points: `#{$map}`";
  }
}

_spacing.scss

/*
  Base:
    p = padding
    m = margin
  Modifiers:
    a = all
    h = horizontal
    v = vertical
    t = top
    r = right
    b = bottom
    l = left
    0 = none
    1 = 1st step in spacing scale
    2 = 2nd step in spacing scale
    3 = 3rd step in spacing scale
    4 = 4th step in spacing scale
    5 = 5th step in spacing scale
    6 = 6th step in spacing scale
    7 = 7th step in spacing scale
  Media Query Extensions:
    -sm[-and-(up|down)]
    -md[-and-(up|down)]
    -lg[-and-(up|down)]
    -xl

  Example:

    .mt1-lg-and-down
    .pv1-sm-and-up
    .ma5-xl
    .pb-3
*/

@each $prop, $abbrev in (margin: m, padding: p) {
  @each $size, $length in $--spacers {
    .#{$abbrev}a#{$size} {
      #{$prop}: $length !important;
    }

    .#{$abbrev}t#{$size},
    .#{$abbrev}v#{$size} {
      #{$prop}-top: $length !important;
    }

    .#{$abbrev}r#{$size},
    .#{$abbrev}h#{$size} {
      #{$prop}-right: $length !important;
    }

    .#{$abbrev}b#{$size},
    .#{$abbrev}v#{$size} {
      #{$prop}-bottom: $length !important;
    }

    .#{$abbrev}l#{$size},
    .#{$abbrev}h#{$size} {
      #{$prop}-left: $length !important;
    }
  }
}

@each $break-point-name, $value in $--breakpoints-spec {
  @include res($break-point-name, $--breakpoints-spec) {
    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $--spacers {
        .#{$abbrev}a#{$size}-#{$break-point-name} {
          #{$prop}: $length !important;
        }

        .#{$abbrev}t#{$size}-#{$break-point-name},
        .#{$abbrev}v#{$size}-#{$break-point-name} {
          #{$prop}-top: $length !important;
        }

        .#{$abbrev}r#{$size}-#{$break-point-name},
        .#{$abbrev}h#{$size}-#{$break-point-name} {
          #{$prop}-right: $length !important;
        }

        .#{$abbrev}b#{$size}-#{$break-point-name},
        .#{$abbrev}v#{$size}-#{$break-point-name} {
          #{$prop}-bottom: $length !important;
        }

        .#{$abbrev}l#{$size}-#{$break-point-name},
        .#{$abbrev}h#{$size}-#{$break-point-name} {
          #{$prop}-left: $length !important;
        }
      }
    }
  }
}

_vars.scss

$--size-base: 14px;

$--spacers: (
  0: 0,
  1: ($--size-base * .25),
  2: ($--size-base * .5),
  3: $--size-base,
  4: ($--size-base * 2),
  5: ($--size-base * 4),
  6: ($--size-base * 8),
  7: ($--size-base * 16),
);

$--sm: 576px;
$--md: 768px;
$--lg: 992px;
$--xl: 1200px;

$--breakpoints-spec: (
  'sm-and-up' : (min-width: $--sm),
  'sm': "(min-width: #{$--sm}) and (max-width: #{$--md} - 1)",
  'sm-and-down': (max-width: $--md - 1),
  'md-and-up' : (min-width: $--md),
  'md': "(min-width: #{$--md}) and (max-width: #{$--lg } - 1)",
  'md-and-down': (max-width: $--lg - 1),
  'lg-and-up' : (min-width: $--lg),
  'lg': "(min-width: #{$--lg}) and (max-width: #{$--xl } - 1)",
  'lg-and-down': (max-width: $--xl - 1),
  'xl' : (min-width: $--xl)
);