Sassで & + & がなんか理解できていなかったのでちゃんと考える

Sassで、同じ要素同士の隣接セレクタの指定として

.class {
  
  & + & {
    margin-top: 10px;
  }
}

みたいなのあるじゃないですか。なんかずっと腑に落ちてなくて、

.class {
  
  + & {
    margin-top: 10px;
  }
}

え、こうじゃないの？ってなぜか思ってたんですよねずっと。なんか、.classで囲まれているから勝手に

.class + .class {
  margin-top: 10px;
}

ってなるやろ、って。中身全部.classつくとなぜか思い込んでたんですよね。なんででしょう。なんかHTMLの階層構造をSassでも維持するもんだと思いこんでいたのですよね。

でも冷静にそれは全く違くて、いや少し考えれば当たり前なんですけど

.class {
  
  &-top {
    margin-top: 10px;
  }
}

で

.class-top {
  margin-top: 10px;
}

ってなるわけなんですからそりゃそもそも&は必要だよね、っていう。
そもそもSassは階層構造を維持するものじゃないよ、っていう。bodyを中に入れるのとかも腑に落ちてなかったんですけど、

.class {
  
  body.is-ie & {
    margin: 10px;
  }
}

とかbodyを中身に入れても全然いいわけで。

body.is-ie .class {
  margin: 10px;
}

はい、というわけで腑に落ちました。1時間前は腑に落ちてなかった。階層構造を維持するもんだという思い込みが…

青いやつの進捗日記。