SCSS Loop for defining margin helpers.

example.scss

$distances: ("s": 10px, "m": 25px);
$sides: left, top, bottom, right;

// This nested loop defines a set of spacer classes which we can use to place margins between
// elements.
//
// It generates slelectors which look like this:
//
//   .ml--s {
//     margin-left: 10px;
//   }
//   .mt--m {
//     margin-left: 25px;
//   }
//
// The naming scheme is [m]argin[l]eft--[s]mall, [m]argin[t]op--[m]edium etc.
@each $label, $distance in $distances {
  @each $side in $sides {
    .m#{str-slice($side, 0, 1)}--#{$label} {
      margin-#{$side}: $distance;
    }
  }
}