Sass and Native Nesting

CSS が独自でネスト（CSS Nesting）ができるようになってきたことに対して、Sass 側でネストする利点についての公式見解

CSS Nesting の場合は判定が :is() で囲まれるため、詳細度が Sass とは変わることがある

code:css

.foo, #bar {

.baz { /* ... */ }

}

このように書いた場合は以下のように判定される

Sass の場合… .foo .baz , #bar .baz

.foo .baz の詳細度は 0 0 2

CSS Nesting の場合 … :is(.foo, #bar) .baz

.foo .baz の詳細度は 1 0 1

:is() は引数のセレクタによって詳細度影響するので、中に ID 指定みたいなのがあるとそこに引っ張られる

Sassの場合はサフィックスで書けるが、CSS Nesting ではそういう書き方ができない

code:css

.foo {

&-suffix { /* ... */ }

}

だと Sass は .foo-suffix と出力できるが CSS Nesting の場合はそういう書き方ができない

Sass のネスト自体は CSS Nesting と互換性がまったくないので影響はないとのこと

代わりに CSS Nesting 側に影響が出ないような対応はしている