Demo: Compass Helper: enumerate

<div class='example'>
  <div class='class-1'>.class-1</div>
  <div class='class-2'>.class-2</div>
  <div class='class-3'>.class-3</div>
  <div class='class-4'>.class-4</div>
  <div class='class-5'>.class-5</div>
</div>

.example
  .class-1 .class-1
  .class-2 .class-2
  .class-3 .class-3
  .class-4 .class-4
  .class-5 .class-5

.example {
  #{enumerate(".class", 2, 4)} {
    background-color: #aaaaaa;
    border: 2px solid #777777;
    margin: 1em;
  }
  @for $i from 2 through 4 {
    .class-#{$i} {
      margin-left: 1em * ($i - 1);
    }
  }
}

.example
  #{enumerate(".class", 2, 4)}
    background-color: #aaaaaa
    border: 2px solid #777777
    margin: 1em
  @for $i from 2 through 4
    .class-#{$i}
      margin-left: 1em * ($i - 1)

.example .class-2, .example .class-3, .example .class-4 {
  background-color: #aaaaaa;
  border: 2px solid #777777;
  margin: 1em;
}
.example .class-2 {
  margin-left: 1em;
}
.example .class-3 {
  margin-left: 2em;
}
.example .class-4 {
  margin-left: 3em;
}