Generate class names like inline styles

genCommonClassName.scss

$sizes: (5, 8, 10, 15, 20, 25, 30, 45);
$sides: ("l": "-left", "r": "-right", "t": "-top", "b": "-bottom");


@each $size in $sizes {
  .m#{$size} {
    margin:#{$size}px;
  }

  .p#{$size} {
    padding:#{$size}px;
  }

  .mx#{$size} {
    margin-left:#{$size}px;
    margin-right:#{$size}px;
  }

  .px#{$size} {
    padding-left:#{$size}px;
    padding-right:#{$size}px;
  }

  .my#{$size} {
    margin-top:#{$size}px;
    margin-bottom:#{$size}px;
  }

  .py#{$size} {
    padding-top:#{$size}px;
    padding-bottom:#{$size}px;
  }

  @each $s,
  $side in $sides {

    .m#{$s}#{$size} {
      margin#{$side}:#{$size}px;
    }

    .p#{$s}#{$size} {
      padding#{$side}:#{$size}px;
    }

  }
}

$width: (60, 80, 90, 100, 120, 140, 150, 160, 170, 180, 200, 220, 250, 300, 350, 400);

@each $w in $width {
  &.w#{$w} {
    width:#{$w}px;
  }
}

$pcts: (25, 33, 46, 50, 64, 66, 100);

@each $p in $pcts {
  .pct#{$p} {
    width: percentage($p/100);
  }
}