Sass自定义边距类名

$max: 200;
@for $i from 0 to $max {
  .ma#{$i} {
    margin: #{$i}px;
  }
}

@for $i from 0 to $max {
  .mx#{$i} {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }
}

@for $i from 0 to $max {
  .my#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
}

@for $i from 0 to $max {
  .mt#{$i} {
    margin-top: #{$i}px;
  }
}

@for $i from 0 to $max {
  .mb#{$i} {
    margin-bottom: #{$i}px;
  }
}

@for $i from 0 to $max {
  .ml#{$i} {
    margin-left: #{$i}px;
  }
}

@for $i from 0 to $max {
  .mr#{$i} {
    margin-right: #{$i}px;
  }
}

@for $i from 0 to $max {
  .pa#{$i} {
    box-sizing: border-box;
    padding: #{$i}px;
  }
}

@for $i from 0 to $max {
  .px#{$i} {
    box-sizing: border-box;
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }
}

@for $i from 0 to $max {
  .py#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }
}

@for $i from 0 to $max {
  .pt#{$i} {
    padding-top: #{$i}px;
  }
}

@for $i from 0 to $max {
  .pl#{$i} {
    box-sizing: border-box;
    padding-left: #{$i}px;
  }
}

@for $i from 0 to $max {
  .pb#{$i} {
    padding-bottom: #{$i}px;
  }
}