Loop for generating padding and margin classes

scss_loops.md

Loop for generating padding and margin classes

/* Margins and Padding */
$sizes: (
  xs: 5px,
  s: 8px,
  m: 10px,
  l: 20px,
  xl: 25px,
);

@each $size, $value in $sizes {
  @each $offset in margin, padding {
    /* Horizontal and vertical */
    .#{$offset}-horizontal-#{$size} {
      margin: 0 $value;
    }
    .#{$offset}-vertical-#{$size} {
      margin: $value 0;
    }
    /* Individual sides */
    @each $side in top, left, bottom, right {
      .#{$offset}-#{$side}-#{$size}{
        #{$offset}-#{$side}: $value;
      }
    }
  }
}

Compiles to:

/* Margins and Padding */
/* Horizontal and vertical */
.margin-horizontal-xs {
  margin: 0 5px;
}
.margin-vertical-xs {
  margin: 5px 0;
}
/* Individual sides */
.margin-top-xs {
  margin-top: 5px;
}
.margin-left-xs {
  margin-left: 5px;
}
.margin-bottom-xs {
  margin-bottom: 5px;
}
.margin-right-xs {
  margin-right: 5px;
}
/* Horizontal and vertical */
.padding-horizontal-xs {
  padding: 0 5px;
}
.padding-vertical-xs {
  padding: 5px 0;
}
/* Individual sides */
.padding-top-xs {
  padding-top: 5px;
}
.padding-left-xs {
  padding-left: 5px;
}
...

and so on