0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
設定
CSS や SCSS のスタイルシートを一貫したインデントでフォーマットおよび整理します。インデントや行幅のオプションを設定し、コードをエディタに貼り付けて フォーマット してください。
ソースコード
ライン:0キャラクター:0
仕組み
圧縮されたり整形が崩れたりした CSS や SCSS のスタイルシートをインデントし直して整え、読みやすくします。圧縮されたスタイルを調べたり、他者の CSS を確認したり、保存前に書式を統一したりするのに役立ちます。
インデントの種類(スペースまたはタブ)、インデント幅、改行コードを選べます。各宣言はそれぞれの行になり、カンマ区切りのセレクターは別々の行に配置されます。
処理はすべて js-beautify を使ってブラウザー内でローカルに行われます。整えるのは見た目で、圧縮・プロパティの並べ替え・ルールの正しさの検証は行いません。
例
a,b{color:red;margin:0}a,
b {
color: red;
margin: 0
}セレクターは行ごとに分けられ、各プロパティがインデントされます。ユースケース
- サイトの圧縮された .css ファイルを読みやすくする。
- コミット前にスタイルシートのインデントを統一する。
- フレームワークやライブラリの CSS ルールを確認・比較する。
- ドキュメントやジェネレーターから貼り付けた SCSS を整える。
よくある質問
SCSS や LESS でも使えますか?
CSS と、ネストされたルールを含む SCSS などの互換構文を整形します。SCSS や LESS を CSS にコンパイルすることはなく、インデントと改行を並べ替えるだけです。
プロパティを並べ替えたりグループ化したりしますか?
いいえ。セレクターと宣言の元の順序を保ちます。読みやすさのために、空白・インデント・改行だけを変更します。
CSS の圧縮と同じですか?
いいえ、逆です。整形は読みやすくするためにスペースや改行を追加し、圧縮はファイルサイズを減らすためにそれらを取り除きます。圧縮するには圧縮ツールを使ってください。
私のコードはサーバーにアップロードされますか?
いいえ。整形はすべてブラウザー内で行われ、CSSがコンピューターから外に出ることはありません。