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