SCSS フォーマッター
このSCSS FormatterでSassのSCSSスタイルシートをフォーマットできます。SCSSを貼り付けると、ツールがネストされたルール、変数、ミックスイン、インクルード、親セレクター、制御ディレクティブを、2つのスペースによるインデント、宣言ごとの改行、プロパティのコロン後のスペース、欠けているセミコロンで整えます。補間とコメントは保持されるため、フロントエンド開発者はコンパイルせずにパーシャルやスニペットを整理できます。
よくある質問
SCSS Formatterはどのように動作しますか？
波括弧、セミコロン、コロン、文字列、コメントなどのトークンとしてスタイルシートを読み取り、それらをもとにレイアウトを再構築します。開き波括弧ごとにインデントされたブロックが始まり、各宣言は独立した行で終わります。
ネストに対応していますか？
はい、ネストされたルールや&:hoverなどの親セレクターは、親より1段深く、1段あたり2つのスペースでインデントされます。セレクターのコロンはそのまま続くため、&:hoverが分割されることはありません。
変数、ミックスイン、インクルードはどのようにフォーマットされますか？
$color: #333;などの変数では、コロンの後にスペースが入ります。@mixinと@includeでは引数が保持され、各カンマの後にスペースが入ります。@if、@each、@forなどの制御ディレクティブでは、括弧の前にスペースが入ります。
補間は保持されますか？
はい、#{$name}などの補間は、記述どおりにコピーされます。.icon-#{$name}などのセレクター内や、プロパティ名内の補間も含まれます。
このツールはSCSSをコンパイルしたり、検証したりしますか？
いいえ、CSSへのコンパイルや構文チェックは行わないため、未完成のスニペットもフォーマットできます。エラーの確認とCSSの生成には、Sassコンパイラーをお使いください。
コメントは保持されますか？
はい。//で始まる行コメントはその行の末尾で終わり、ブロックコメントは元の位置に保持されます。
インデント形式のSass構文でも使えますか？
いいえ、このツールは波括弧とセミコロンを使うSCSS用です。インデント形式の.sass構文のファイルにはインデントの基準となる波括弧がないため、まずSCSSに変換してください。
インデントを変更できますか？
いいえ、出力は常に2つのスペースを使い、フォーマッターにオプションはありません。そのため、同じスタイルシートからは常に同じ結果が得られます。
結果がscssのコードフェンスで囲まれているのはなぜですか？
出力はscssと指定されたMarkdownコードブロックとして返されるため、シンタックスハイライトされます。.scssファイルに使うには、フェンスの間の行をコピーしてください。
スタイルシートのサイズ上限はどれくらいですか？
1回の実行につき最大5 MBです。これより大きい入力はメッセージとともに拒否されます。出力はCode FormatterのSCSSオプションと同じです。