使用Less或Sass的each生成样式类、pt-md, mb-xs

<div class="pa-xs mt-md" />

通过这种方式添加样式，容易修改维护、统一调整且没有行间样式那样的高权重

Less版

@spaceingType: {
    m: margin;
    p: padding;
};
@spaceingDirections: {
    t: top;
    r: right;
    b: bottom;
    l: left;
};
@spaceingBaseSize: 16px;
@spaceingSizes: {
    no: 0;
    xs: 0.5;
    sm: 1;
    md: 1.25;
    lg: 1.5;
    xl: 2;
};
each(@spaceingType, .(@typeVal, @typeKey, @typeIdx) {
 // eg:  mt-md
 each(@spaceingDirections, .(@dirVal, @dirKey, @dirIdx) {
   each(@spaceingSizes, {
     .@{typeKey}@{dirKey}-@{key} {
        @{typeVal}-@{dirVal}: @value * @spaceingBaseSize;
     } 
   })
 })
 // eg: ma-md
 each(@spaceingSizes, {
    .@{typeKey}a-@{key} {
         @{typeVal}: @value * @spaceingBaseSize;
    }
    // eg: mx-md  my-md
    .@{typeKey}x-@{key} {
         @{typeVal}-left: @value * @spaceingBaseSize;
         @{typeVal}-right: @value * @spaceingBaseSize;
    }
    .@{typeKey}y-@{key} {
         @{typeVal}-top: @value * @spaceingBaseSize;
         @{typeVal}-bottom: @value * @spaceingBaseSize;
    } 
 })
})

Sass版

$spaceingType: (
    m: margin,
    p: padding
);
$spaceingDirections: (
    t: top,
    r: right,
    b: bottom,
    l: left
);
$spaceingBaseSize: 16px;
$spaceingSizes: (
    no: 0,
    xs: 0.5,
    sm: 1,
    md: 1.25,
    lg: 1.5,
    xl: 2
);
@each $typeKey, $typeVal in $spaceingType {
  @each $sizeKey, $sizeVal in $spaceingSizes {
    .#{$typeKey}a-#{$sizeKey} {
      #{$typeVal}: $sizeVal * $spaceingBaseSize;
    }
  }

  @each $sizeKey, $sizeVal in $spaceingSizes {
    .#{$typeKey}x-#{$sizeKey} {
      #{$typeVal}-left: $sizeVal * $spaceingBaseSize;
      #{$typeVal}-right: $sizeVal * $spaceingBaseSize;
    }
  }

  @each $sizeKey, $sizeVal in $spaceingSizes {
    .#{$typeKey}y-#{$sizeKey} {
      #{$typeVal}-top: $sizeVal * $spaceingBaseSize;
      #{$typeVal}-bottom: $sizeVal * $spaceingBaseSize;
    }
  }

  @each $dirKey, $dirVal in $spaceingDirections {
    @each $sizeKey, $sizeVal in $spaceingSizes {
      .#{$typeKey}#{$dirKey}-#{$sizeKey} {
        #{$typeVal}-#{$dirVal}: $sizeVal * $spaceingBaseSize;
      }
    }
  }
}