Cacher is the code snippet organizer for pro developers

$breakpoints: xs sm lg xl;
$positions: top right bottom left;
@each $b in $breakpoints {
  $i: index($breakpoints, $b);

  .margin-#{$b} {
    margin: #{10 * $i}px;
  }
  @each $p in $positions {
    .margin-#{$p}-#{$b} {
      margin-#{$p}: #{10 * $i}px;
    }
  }

  .padding-#{$b} {
    padding: #{10 * $i}px;
  }
  @each $p in $positions {
    .padding-#{$p}-#{$b} {
      padding-#{$p}: #{10 * $i}px;
    }
  }
}