Sass：ネスト構造のおさらい

標準ネスト

.class1 {
    margin: 0;
    .class2 {
        margin: 0;
    }
}

▼CSS出力

.class1 {
  margin: 0;
}
.class1 .class2 {
  margin: 0;
}

Sassネストの基本形。

結合ネスト

.class1 {
    &.class2 {
        margin: 0;
    }
    &:hover {
        background-color: #ccc;
    }
}

▼CSS出力

.class1.class2 {
  margin: 0;
}
.class1:hover {
  background-color: #ccc;
}

&を使うことでクラス間のスペースを無くし、同時定義した場合の宣言として出力されます。
「:hover」や「:active」なども基本的にこの記法です。

逆転ネスト

.class2 {
    .class1 & {
        margin: 0;
    }
}

▼CSS出力

.class1 .class2 {
  margin: 0;
}

結合ネストと異なり、ネストしている宣言の後に&を付けることで、それを親要素として出力します。
親要素のクラス名によって子要素のスタイルを変える場合などに使えますが、Sass側の可読性が落ちやすくもなるので慎重に使いたいところです。