how to translate similar codes to a function in compass sass function?

Question

I want to add some common vars in my scss file, such as mgb10 for margin-bottom:10px; pdl20 for padding-left:20px;
my method is very stupid. how to improve my code usin

Answer 1

Here is a Sass mixin (you can change it to Scss) that uses the @for directive to generate all the placeholder selectors:

=shorthander($property: margin, $shorthand: mg)
  @for $i from 0 through 4
    $multiple: $i*5
    %#{$shorthand}#{$multiple}
      #{$property}: $multiple*1px

+shorthander()
+shorthander(margin-top, mgt)
+shorthander(margin-right, mgr)
+shorthander(margin-bottom, mgb)
+shorthander(margin-left, mgl)

div
  @extend %mgt20

Demo