CSSネスト

入れ子にした時、子の先頭の文字がアルファベットの時は & が必要らしい。なんで?

先頭がアルファベットとはつまり HTML 要素(またはカスタム要素)のことで、.class::pseudo-element などは問題ない。または > a のようにセレクタを先頭に置いている場合もセーフ。

/* NG */
.foo {
  a {
    color: red;
  }
  hoge-element {
    font-size: 0;
  }
}

/* OK */
.foo {
  & a {
    color: red;
  }
  > a {
    color: green;
  }
  .bar {
    color: blue;
  }
}

CSS ネストは現状モダンブラウザの全てが対応していることになっている(仕様はまだ草案だけど)。じゃあこれで sass は不要かというと当分はそうでもなさそう。プレースホルダー…は要らないけど、@mixin@function、minify など、プレーン CSS には実装されないだろう便利機能がたくさんある。