Scss/Less配置公共的padding，margin

1.在Scss中配置：

/** 基础通用 **/
@for $i from 1 through 500 {
  //根据自己的范围定义
  .m#{$i} {
    margin: #{$i}px !important;
  }
  .mx#{$i} {
    margin: 0 #{$i}px !important;
  }
  .my#{$i} {
    margin: #{$i}px 0 !important;
  }
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }
  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .mr#{$i} {
    margin-right: #{$i}px !important;
  }
  .ml#{$i} {
    margin-left: #{$i}px !important;
  }
  .p#{$i} {
    padding: #{$i}px !important;
  }
  .px#{$i} {
    padding: 0 #{$i}px !important;
  }
  .py#{$i} {
    padding: #{$i}px 0;
  }
  .pt#{$i} {
    padding-top: #{$i}px !important;
  }
  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .pr#{$i} {
    padding-right: #{$i}px !important;
  }
  .pl#{$i} {
    padding-left: #{$i}px !important;
  }
  .f#{$i} {
    font-size: #{$i}px !important;
  }
}

2.在Less中配置：

.padding(@n, @i: 1) when (@i =< @n) {
  .pt@{i} {
    padding-top: @i + 0px!important;
  }

  .pr@{i} {
    padding-right: @i + 0px!important;
  }

  .pb@{i} {
    padding-bottom: @i + 0px!important;
  }

  .pl@{i} {
    padding-left: @i + 0px!important;
  }

  .p@{i} {
    padding: @i + 0px!important;
  }

  .px@{i} {
    padding: 0 @i + 0px!important;
  }

  .py@{i} {
    padding: @i + 0px 0!important;
  }

  .padding(@n, (@i + 1));
}

.margin(@n, @i: 1) when (@i =< @n) {
  .mt@{i} {
    margin-top: @i + 0px!important;
  }

  .mr@{i} {
    margin-right: @i + 0px!important;
  }

  .mb@{i} {
    margin-bottom: @i + 0px!important;
  }

  .ml@{i} {
    margin-left: @i + 0px!important;
  }

  .mx@{i} {
    margin: 0 @i + 0px!important;
  }

  .my@{i} {
    margin: @i + 0px 0!important;
  }

  .m@{i} {
    margin: @i + 0px!important;
  }

  .margin(@n, (@i + 1));
}

.padding(200);
.margin(200);

3.注意事项：

1）在vue中可以直接向下面一样使用：

<div class="flex_xc p10">

2）在react中复杂一点：

<div className={`${styles.item} p50`}>