Sassメモ:ネストの中で親要素セレクタを含める

goto_jp 712views 更新:2014年2月17日
.box {
  background-color:#ccc;
  .child {
    color:#09c;
  }
  .parent & {
    margin:10px 0;
  }
}

上記の「.parent &」のように記述すると…

.box {
  background-color: #ccc;
}
.box .child {
  color: #09c;
}
.parent .box {
  margin: 10px 0;
}

セレクタ後に「&」を付ける記述だと、ネストしているセレクタの親として出力されます。
ネスト構造が直感的に分かりにくくなるので個人的にオススメしかねますが、イレギュラーな書き方が必要な時には役立ちそうです。

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

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

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