# 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オプションと同じです。

ここに広告を掲載しませんか？

[メールでお問い合わせ](mailto:hi@dennn.is?subject=OneClick%20Pro%E3%81%A7%E3%81%AE%E5%BA%83%E5%91%8A%E6%8E%B2%E8%BC%89)

[広告 WordPress向けのエージェント対応プラグインスイート。](https://sleekwp.com/?ref=oneclickpro)