CSSでネストを使いこなそう

cssでセレクタを利用する際、以下のようなコードを書いていませんか？

CSS

    
parent {
  ...
}
parent.child1 {
  ...
}
parent + child2 {
  ...
}
parent > child3 {
  ...
}

ただこのコード、何度も親要素であるparentを指定しているのでコード量も多くなり、見にくいですよね。

そこで「ネスト」を取り入れると、

CSS

    
parent {
 ...
 &.child1 {
  ...
 }
 &+child2 {
  ...
 }
 &>child3 {
  ...
 }
}

このように簡潔なコードを書くことができます。

ネストの子要素にはふつう「&」（アンパサンド）をつけます。これはさまざまな記号で代用でき、ほかの文字列との混合を避けるための仕様です。

&をつけなくてはいけない場合の例として、疑似要素があります。たとえば、

CSS

    
parent {
 ...
 :before {
  ...
 }
 :after {
  ...
 }
}

このように書いてはいけません。この場合も、

CSS

    
parent {
 ...
 &:before {
  ...
 }
 &:after {
  ...
 }
}

このように＆をつけましょう。