scss 自动生成margin和padding的class

费了半天劲才搞懂了，scss的函数代码写的是真累啊，而且不知道为啥我的代码格式化会给我自动换一行，导致极度不美观。

//生成margin和padding
$multiplier:4; //乘数
$dimensions:("p":"padding", "m":"margin");
//方向
$directions:("t":"top", "b":"bottom", "l":"left", "r":"right", "x":("left", "right"), "y":("top", "bottom"), "a":"");

//四个方向
@each $dimKey,
$dimVal in $dimensions {

  @each $dirKey,
  $dirVal in $directions {

    @for $i from 1 through 8 {
      $size: $i * $multiplier;

      @if $dirKey=="x" {
        $val1: nth($dirVal, 1);
        $val2: nth($dirVal, 2);

        .#{$dimKey}#{$dirKey}-#{$i} {
          #{$dimVal}-#{$val1}:#{$size}px !important;
          #{$dimVal}-#{$val2}:#{$size}px !important;
        }

      }

      @else if $dirKey=="y" {
        $val1: nth($dirVal, 1);
        $val2: nth($dirVal, 2);

        .#{$dimKey}#{$dirKey}-#{$i} {
          #{$dimVal}-#{$val1}:#{$size}px !important;
          #{$dimVal}-#{$val2}:#{$size}px !important;
        }

      }

      @else if $dirKey=="a" {
        .#{$dimKey}#{$dirKey}-#{$i} {
          #{$dimVal}:#{$size}px !important;
        }

      }

      @else {
        .#{$dimKey}#{$dirKey}-#{$i} {
          #{$dimVal}-#{$dirVal}:#{$size}px !important;
        }
      }

    }
  }
}


// none
@each $dimKey,
$dimVal in $dimensions {

  @each $dirKey,
  $dirVal in $directions {
    @if $dirKey=="x" {
      $val1: nth($dirVal, 1);
      $val2: nth($dirVal, 2);

      .#{$dimKey}#{$dirKey}-none {
        #{$dimVal}-#{$val1}: 0px !important;
        #{$dimVal}-#{$val2}: 0px !important;
      }

    }

    @else if $dirKey=="y" {
      $val1: nth($dirVal, 1);
      $val2: nth($dirVal, 2);

      .#{$dimKey}#{$dirKey}-none {
        #{$dimVal}-#{$val1}: 0px !important;
        #{$dimVal}-#{$val2}: 0px !important;
      }

    }

    @else if $dirKey=="a" {
      .#{$dimKey}#{$dirKey}-none {
        #{$dimVal}: 0px !important;
      }
    }

    @else {
      .#{$dimKey}#{$dirKey}-none {
        #{$dimVal}-#{$dirVal}: 0px !important;
      }
    }
  }
}

默认我是用$multiplier为乘数，ml-5就是5倍$multiplier。可以根据自己需要设置。

生成的class除了l,r,t,b,x,y,a这几个方向，还有对应的none设置。

生成的class

.pt-1 {
  padding-top: 4px !important;
}

.pt-2 {
  padding-top: 8px !important;
}

.pt-3 {
  padding-top: 12px !important;
}

.pt-4 {
  padding-top: 16px !important;
}

.pt-5 {
  padding-top: 20px !important;
}

.pt-6 {
  padding-top: 24px !important;
}

.pt-7 {
  padding-top: 28px !important;
}

.pt-8 {
  padding-top: 32px !important;
}

.pb-1 {
  padding-bottom: 4px !important;
}

.pb-2 {
  padding-bottom: 8px !important;
}

.pb-3 {
  padding-bottom: 12px !important;
}

.pb-4 {
  padding-bottom: 16px !important;
}

.pb-5 {
  padding-bottom: 20px !important;
}

.pb-6 {
  padding-bottom: 24px !important;
}

.pb-7 {
  padding-bottom: 28px !important;
}

.pb-8 {
  padding-bottom: 32px !important;
}

.pl-1 {
  padding-left: 4px !important;
}

.pl-2 {
  padding-left: 8px !important;
}

.pl-3 {
  padding-left: 12px !important;
}

.pl-4 {
  padding-left: 16px !important;
}

.pl-5 {
  padding-left: 20px !important;
}

.pl-6 {
  padding-left: 24px !important;
}

.pl-7 {
  padding-left: 28px !important;
}

.pl-8 {
  padding-left: 32px !important;
}

.pr-1 {
  padding-right: 4px !important;
}

.pr-2 {
  padding-right: 8px !important;
}

.pr-3 {
  padding-right: 12px !important;
}

.pr-4 {
  padding-right: 16px !important;
}

.pr-5 {
  padding-right: 20px !important;
}

.pr-6 {
  padding-right: 24px !important;
}

.pr-7 {
  padding-right: 28px !important;
}

.pr-8 {
  padding-right: 32px !important;
}

.px-1 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.px-2 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.px-3 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.px-4 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.px-5 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.px-6 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.px-7 {
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.px-8 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.py-1 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.py-3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.py-4 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.py-5 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.py-6 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.py-7 {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.py-8 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.pa-1 {
  padding: 4px !important;
}

.pa-2 {
  padding: 8px !important;
}

.pa-3 {
  padding: 12px !important;
}

.pa-4 {
  padding: 16px !important;
}

.pa-5 {
  padding: 20px !important;
}

.pa-6 {
  padding: 24px !important;
}

.pa-7 {
  padding: 28px !important;
}

.pa-8 {
  padding: 32px !important;
}

.mt-1 {
  margin-top: 4px !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.mt-3 {
  margin-top: 12px !important;
}

.mt-4 {
  margin-top: 16px !important;
}

.mt-5 {
  margin-top: 20px !important;
}

.mt-6 {
  margin-top: 24px !important;
}

.mt-7 {
  margin-top: 28px !important;
}

.mt-8 {
  margin-top: 32px !important;
}

.mb-1 {
  margin-bottom: 4px !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.mb-3 {
  margin-bottom: 12px !important;
}

.mb-4 {
  margin-bottom: 16px !important;
}

.mb-5 {
  margin-bottom: 20px !important;
}

.mb-6 {
  margin-bottom: 24px !important;
}

.mb-7 {
  margin-bottom: 28px !important;
}

.mb-8 {
  margin-bottom: 32px !important;
}

.ml-1 {
  margin-left: 4px !important;
}

.ml-2 {
  margin-left: 8px !important;
}

.ml-3 {
  margin-left: 12px !important;
}

.ml-4 {
  margin-left: 16px !important;
}

.ml-5 {
  margin-left: 20px !important;
}

.ml-6 {
  margin-left: 24px !important;
}

.ml-7 {
  margin-left: 28px !important;
}

.ml-8 {
  margin-left: 32px !important;
}

.mr-1 {
  margin-right: 4px !important;
}

.mr-2 {
  margin-right: 8px !important;
}

.mr-3 {
  margin-right: 12px !important;
}

.mr-4 {
  margin-right: 16px !important;
}

.mr-5 {
  margin-right: 20px !important;
}

.mr-6 {
  margin-right: 24px !important;
}

.mr-7 {
  margin-right: 28px !important;
}

.mr-8 {
  margin-right: 32px !important;
}

.mx-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.mx-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.mx-3 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.mx-4 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.mx-5 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.mx-6 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.mx-7 {
  margin-left: 28px !important;
  margin-right: 28px !important;
}

.mx-8 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.my-1 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.my-2 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.my-3 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.my-4 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.my-5 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.my-6 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.my-7 {
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}

.my-8 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.ma-1 {
  margin: 4px !important;
}

.ma-2 {
  margin: 8px !important;
}

.ma-3 {
  margin: 12px !important;
}

.ma-4 {
  margin: 16px !important;
}

.ma-5 {
  margin: 20px !important;
}

.ma-6 {
  margin: 24px !important;
}

.ma-7 {
  margin: 28px !important;
}

.ma-8 {
  margin: 32px !important;
}

.pt-none {
  padding-top: 0px !important;
}

.pb-none {
  padding-bottom: 0px !important;
}

.pl-none {
  padding-left: 0px !important;
}

.pr-none {
  padding-right: 0px !important;
}

.px-none {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.py-none {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.pa-none {
  padding: 0px !important;
}

.mt-none {
  margin-top: 0px !important;
}

.mb-none {
  margin-bottom: 0px !important;
}

.ml-none {
  margin-left: 0px !important;
}

.mr-none {
  margin-right: 0px !important;
}

.mx-none {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.my-none {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.ma-none {
  margin: 0px !important;
}