ピュアCSSネストとSassでは入れ子セレクタ`&`の動作が違う、という話

概要

　CSSネストとSassの&の解釈が違うので、気をつけろ。
　特に、入れ子の親が単純セレクタではなくて&を後ろに置いて使うときには注意が必要。

前提

.hoge{
    & .fuga{ 
        color: red;
    }
}

これは、Sassとしてコンパイルすると

.hoge .fuga{
    color: red;
}

となりますが、CSSネストだと

:is(.hoge) .fuga{
    color: red;
}

と等価になり、Sassと解釈が違います。
おおむね同様の結果になりますが、違う結果になる場合があります。

問題になるケース

.outer .inner{
    .wrapper &{
        color: red;
    }
}

これは、Sassとしてコンパイルすると

.wrapper .outer .inner{
    color: red;
}

となり、CSSネストとして解釈すると、

.wrapper :is(.outer .inner){
    color: red;
}

と等価です。

一見同じように見えますが、少し違います。
Sassの場合、「.wrapperの子孫である.outerの子孫である.inner」なので、.outerは必ず.wrapperの子孫です。
CSSネストの場合、「.wrapperの子孫である（.outerの子孫である.inner）」なので、.outerと.wrapperの親子関係は明示されていません。

MDNでも記述があいまいになっているので、素直に読んでしまうと誤解しかねません。注意が必要です。

サンプル

上記コードの表示は以下のようになります。

See the Pen Difference between CSS nesting and sass by lhankor_mhy (@lhankor_mhy) on CodePen.

このサンプルのようにネストの親が単純セレクタではない場合は、Sassを想定していると、思わぬ結果になる場合があります。

参照