【今さら】cssでネストが出来るようになっていた

はじめに

ここ数年フロントエンドの開発では基本的にはscssか何かしらのフレームワークを使用していたため、css自体のアップデートに疎くなっていた。

そんな中、先日cssでもscssのように入れ子を使用できるようになっていたことに気付いたため、どのバージョンから対応していたのかを調べてみた。

Can I use を見る

まあ一番わかりやすい。

css nestingで調べると出てくる。

どうやら2段階あるようで、

1. &を使用しないと正しく動作しない
2. &がなくても動作する

みたいです。

1の方は

.foo {
  div {
    color: green;
  }
}

こういうのがNGらしい。

.foo {
  & div {
    color: green;
  }
}

こういう風にしないといけない。

Chromeでいうと1が112-119のバージョンで、2が120以降のバージョンらしい。

MDN を見る

気になる記載があったので。

連結はできない

.component {
  &__child-element {
  }
}
/* Sass ではこのようになる */
.component__child-element {
}

最近あまり見ない気がしますが、BEMで書いてた時確かにこんな感じのことやってた気がする。

ただcssではこれは現状不可能とのこと。これもいつか対応するのかなと思いつつも、W3Cを読むのはまたの機会に。

おわり

cssもどんどん便利になっていってるんですね。もっと色々最近の動向を追わねばと思い知らされました。