Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

div{
  $v: str-slice(padding, 0, 1);
  content: "#{$v}";
}

$sizes: (
  es: 10px,
  s: 20px,
  m: 30px,
  l: 40px,
  el: 50px
);

@each $rule in padding, margin{
  $rule-prefix: str-slice($rule, 0, 1);
  @each $direction in "", top, right, bottom, left{
    $direction-prefix: str-slice($direction, 0, 1);
    @each $size-name, $size in $sizes{
      $class-name: $rule-prefix + "-" + $direction-prefix + "-" + $size-name;
      $rule-name: $rule + "-" + $direction;
      .#{$class-name}{
          #{$rule-name}: $size;
      }
    }
  }
}

SassMeister-output.css

div {
  content: "p";
}

.p--es {
  padding-: 10px;
}

.p--s {
  padding-: 20px;
}

.p--m {
  padding-: 30px;
}

.p--l {
  padding-: 40px;
}

.p--el {
  padding-: 50px;
}

.p-t-es {
  padding-top: 10px;
}

.p-t-s {
  padding-top: 20px;
}

.p-t-m {
  padding-top: 30px;
}

.p-t-l {
  padding-top: 40px;
}

.p-t-el {
  padding-top: 50px;
}

.p-r-es {
  padding-right: 10px;
}

.p-r-s {
  padding-right: 20px;
}

.p-r-m {
  padding-right: 30px;
}

.p-r-l {
  padding-right: 40px;
}

.p-r-el {
  padding-right: 50px;
}

.p-b-es {
  padding-bottom: 10px;
}

.p-b-s {
  padding-bottom: 20px;
}

.p-b-m {
  padding-bottom: 30px;
}

.p-b-l {
  padding-bottom: 40px;
}

.p-b-el {
  padding-bottom: 50px;
}

.p-l-es {
  padding-left: 10px;
}

.p-l-s {
  padding-left: 20px;
}

.p-l-m {
  padding-left: 30px;
}

.p-l-l {
  padding-left: 40px;
}

.p-l-el {
  padding-left: 50px;
}

.m--es {
  margin-: 10px;
}

.m--s {
  margin-: 20px;
}

.m--m {
  margin-: 30px;
}

.m--l {
  margin-: 40px;
}

.m--el {
  margin-: 50px;
}

.m-t-es {
  margin-top: 10px;
}

.m-t-s {
  margin-top: 20px;
}

.m-t-m {
  margin-top: 30px;
}

.m-t-l {
  margin-top: 40px;
}

.m-t-el {
  margin-top: 50px;
}

.m-r-es {
  margin-right: 10px;
}

.m-r-s {
  margin-right: 20px;
}

.m-r-m {
  margin-right: 30px;
}

.m-r-l {
  margin-right: 40px;
}

.m-r-el {
  margin-right: 50px;
}

.m-b-es {
  margin-bottom: 10px;
}

.m-b-s {
  margin-bottom: 20px;
}

.m-b-m {
  margin-bottom: 30px;
}

.m-b-l {
  margin-bottom: 40px;
}

.m-b-el {
  margin-bottom: 50px;
}

.m-l-es {
  margin-left: 10px;
}

.m-l-s {
  margin-left: 20px;
}

.m-l-m {
  margin-left: 30px;
}

.m-l-l {
  margin-left: 40px;
}

.m-l-el {
  margin-left: 50px;
}