关于less:使用Less或Sass的each生成样式类ptmd-mbxs

<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;
      }
    }
  }
}