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: #aaa
    border: 2px solid #777
    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:#aaa;border:2px solid #777;margin:1em}.example .class-2{margin-left:1em}.example .class-3{margin-left:2em}.example .class-4{margin-left:3em}