使用Less each生成样式类 xs、sm、md、lg、xl

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

通过这种形式增加样式类，容易修改维护，可以灵活自由的调整尺寸的权重

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