コードスタイル。 SCSS

タブ文字を使用する

• このチェックボックスを選択すると、タブ文字が使用されます：

  • Tab キー押下時

  • インデント用

  • コードを再フォーマットするため

• チェックボックスがオフの場合、PhpStorm はタブではなくスペースを使用します。

スマートタブ

インデントは 2 つの部分で構成されます。 1 つの部分はコードブロックのネストに起因し、他の部分はアライメントによって決定されます。

• このチェックボックスが選択されている場合、ネストの結果生じる部分にはタブとスペースの両方が（必要に応じて）含まれますが、位置合わせで定義される部分はスペースのみで構成されます。

• このチェックボックスをオフにすると、タブのみが使用されます。 これは、指定されたタブサイズに合うスペースのグループを再フォーマットした後、自動的にタブに置き換えられることを意味します。

タブサイズ

このフィールドで、タブに収まるスペースの数を指定します。

インデント

このフィールドでは、各インデントレベルに挿入されるスペースの数を指定します。

連続インデントの文字数

このフィールドで、プロパティの値の間に挿入するスペースの数を指定します。

空行でインデントを保持する

このチェックボックスが選択されている場合、PhpStorm は空行のインデントをコードが含まれるかのように保持します。 チェックボックスをオフにすると、PhpStorm は空行のタブ文字とスペースを削除します。

空白行の指定

この領域では、再フォーマット後に保持する余白行数を指定します。

最小の空白行数

この領域で、最上位ブロックとネストしたセレクターの周囲に余分な空行を追加するかどうかを構成します。 各オプションの横にあるフィールドで、残す余白の最小行数を指定します。

波括弧の配置

このリストを使用して、PhpStorm がセレクターの左波括弧を配置する位置を指定します。 利用可能なオプションは次のとおりです：

• 行末へ

• 次の行に配置

値の配置

このリストを使用して、PhpStorm が属性と値をどのように揃えるかを指定します。 利用可能なオプションは次のとおりです：

• 揃えない: このオプションを選択して、属性名の最初の文字の位置合わせを指定します。

• 値の位置: このオプションを選択して、属性値の最初の文字の位置合わせを指定します。

• コロンの位置

引用符

CSS、SCSS、Less のコンテキストでは、PhpStorm はデフォルトで、 import ステートメントおよび URL で生成された文字列リテラルに double 引用符を使用します。 単一引用符を使用するには、このリストから 単一 を選択します。

再フォーマット後に選択したスタイルをファイル全体に適用するには、リストの フォーマット時に強制する チェックボックスを選択します。

右波括弧をプロパティに揃える

このチェックボックスが選択されている場合、セレクターの右波括弧はプロパティ一覧の下に配置されます。

このチェックボックスが選択されていない場合、セレクターの右波括弧はセレクターの下に配置されます。

一行のブロックを保持する

このチェックボックスが選択されている場合、単一のプロパティを持つブロックは一行にまとめられます。

このチェックボックスが選択されていない場合、各プロパティはそれぞれ独自の行に配置されます。

Space

この領域のチェックボックスをオンにして、コロンで区切られたキーと値の後、セレクタの左中括弧の前にスペースを追加します。

コメント

この領域のコントロールを使用して、行コメントやブロックコメント、およびそれらの中のスペースの位置を設定します。

• 最初の列に行コメントを入れる: このチェックボックスを選択すると、最初の列から行のコメントが始まります。 チェックボックスをオフにすると、コード内で行コメントが整列されます。

• 行コメントの先頭に空白を追加する: このチェックボックスを選択すると、行コメント文字とコメント行の最初の文字の間にスペースが挿入されます。

• ブロックコメントの周りにスペースを追加する: ブロックコメントに先頭と末尾のスペースを追加するには、このチェックボックスを選択します。

  デフォルトでは、コードフラグメントをブロックコメントで囲むと、テキストはスペースなしで /* 文字を開いた直後に始まります。 */ 文字を閉じる前に、スペースも挿入されません。 このデフォルトのコードスタイルは、ESLint などの一部のリンターのルールと競合する可能性があります。

16 進数の色

この領域を使用して、16 進カラー構文を設定します。 以下のチェックオプションから選択できます。

• hex カラーを変換: このチェックボックスを選択して、16 進カラーの大文字小文字を設定します。 小文字 または 大文字 を選択できます。

• hex カラーフォーマットを変換: このチェックボックスを選択して、16 進カラーフォーマットの長さを設定します。 長いフォーマット または 短いフォーマット を選択できます。

プレビュー ペインで変更を表示します。