DevToolBox

CSSネスティングジェネレーター

ネイティブCSSネスティング構文(&セレクタ)を使ったCSSを生成・整形します。

CSSネスティングとは?

CSSネスティングは、SASSやLessで使われていたネスト構文がネイティブCSSに導入された機能です。&セレクタを使うことで、親セレクタを参照しながら子要素のスタイルを定義できます。

モダンブラウザ(Chrome 112+、Firefox 117+、Safari 16.5+)でサポートされており、 コンパイル不要でSASSライクな書き方ができます。コードの可読性とメンテナンス性が向上します。

すべての処理はブラウザ内で完結します。