置き換えるときの注意点

• Sassの&__titleのように、セレクターをつなげて書くことはできません。 書いたルールは無視されるため、BEMの要素は.card__titleのように完全なセレクターで書きます。
• 入れ子のルールの詳細度は、:is()と同じく、親のセレクターのうちいちばん高いものになります。 下の例では、.sidebarの中の.linkにも#mainの詳細度が使われ、あとに書いた.nav .linkに勝ちます。 Sassでは.sidebar .linkに展開されるため、.nav .linkが勝っていました。
• 入れ子のルールのあとに書いた宣言が書いた順に効くのは、Chrome 130・Firefox 132・Safari 18.2からです。 それより前のバージョンでは入れ子のルールより前に移されるため、宣言は入れ子のルールより前にまとめて書きます。
• &を付けずに型セレクターから書く入れ子（li { }など）は、Chrome 120・Safari 17.2からです。 それより前のバージョンでは、& liと書く必要がありました。
• 入れ子のルールが無効でも、無視されるのはそのルールだけで、親の宣言は効きます。

#main,
.sidebar {
  & .link {
    color: blue;
  }
}

.nav .link {
  color: red;
}

フォールバック

対象の5ブラウザはすべて対応済みなので、通常はビルドで変換する必要はありません。 対応していないブラウザでは、入れ子のルールがまるごと無視されます。 古いブラウザも支える必要がある場合は、PostCSSなどのビルドツールで、以前の書き方の平らなCSSに変換します。