CSS整形ツール（CSS・SCSS・LESS）

圧縮されたスタイルシートやコピーしたコード片は、読みにくく、編集はさらに困難です。この整形ツールは構造を組み立て直します。宣言は1行に1つ、入れ子のブロックは1段深くインデントし、カンマ区切りのセレクターは別々の行にして、子・兄弟・隣接の結合子のまわりに空白を入れます。SCSSとLESSの入れ子、&親セレクター、#{}補間、//コメントを理解し、文字列とurl()は書いたまま残します。

使い方

1. CSS、SCSS、LESS（圧縮されたもの、または乱れたもの）を貼り付けます。
2. 空白2つ、空白4つ、タブから選びます。
3. ルール間の空行を残すかどうかを決めます。
4. 必要に応じて16進数の色を小文字にするか、プロパティをアルファベット順に並べ替えます。
5. 整形したコードをコピーします。

計算式

セレクター, セレクター { プロパティ: 値; } → セレクターは1行に1つ、宣言も1行に1つ、入れ子の階層ごとにインデント1段

テキストをトークンに分解するため、引用符、コメント、url()、#{}の中の波括弧、コロン、セミコロンは構造として扱いません。値は空白1つに整え、カンマの後ろと!importantの前に空白を入れます。ブロックの最後の宣言には、欠けているセミコロンを補います。波括弧の対応が取れていない場合は、壊れた出力を出す代わりに、行と列の番号を報告します。

計算例

サンプルの.card,.card--wide{padding:16px 24px;border:1px solid #DDD;…}は、.card,と.card--wide {の2行になり、続けてborder: 1px solid #ddd;やbox-shadow: 0 1px 2px rgba(0, 0, 0, .08);のようなインデントされた宣言が4つ並びます。メディアクエリは@media (max-width: 600px) {になり、2つのルールが内側にインデントされます。ツールは合計でルール5件（メディアクエリを含む）と宣言8件を報告します。