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

goto_jp 246views 更新:2014年8月25日

標準ネスト

.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側の可読性が落ちやすくもなるので慎重に使いたいところです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません