Sass、SCSS、Less、PostCSS
PhpStorm は、 Sass(英語)、 Less(英語)、 SCSS(英語) コードを CSS(英語) に変換するコンパイラーと統合します。 PhpStorm でコンパイラーを使用するには、関連する事前定義済みテンプレートに基づいて、 File Watcher としてコンパイラーを構成する必要があります。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定 | プラグイン ページで、 CSS、 Sass、 Less、 File Watchers の必須プラグインが有効になっていることを確認します。 詳細については、 プラグインの管理を参照してください。
Sass/SCSS のインストール
コマンドライン シェルまたは組み込みの ターミナル （Alt+F12 ）で、次のように入力してください：
npm install -g sassSass オフィシャル Web サイト(英語)の詳細を参照してください。
Less のインストール
コマンドライン シェルまたは組み込みの ターミナル （Alt+F12 ）で、次のように入力してください：
npm install --global lessLess オフィシャル Web サイト(英語)の詳細を参照してください。
コードを CSS にコンパイルする
コードを自動的にコンパイルするには、コンパイラーをインストールし、ファイルへの変更を追跡してコンパイラーを実行する Sass、Less、SCSS File Watcher を構成する必要があります。
ファイルを開くと、PhpStorm は現在のプロジェクトで適用可能な File Watcher が使用可能かどうかを確認します。 そのような File Watcher が構成されているが無効になっている場合、PhpStorm は構成されている File Watcher について通知し、有効にすることを提案するポップアップを表示します。
現在のプロジェクトで該当する File Watcher が構成され、有効になっている場合、PhpStormは 新規ウォッチャーダイアログで指定されたイベントが発生すると自動的にコンパイラーを起動します。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにすると、保存時 (、 Ctrl+S) または PhpStorm からフォーカスを移動したとき (フレームの非アクティブ化時) に File Watcher が開始されます。
File Watchers の詳細を参照してください。
PhpStorm は生成された出力で別のファイルを作成します。 ファイルの名前は、ソース Sass、 Less、 SCSS ファイルの名前と拡張子 .css です。 生成されたファイルの場所は、 新規ウォッチャーダイアログ の リフレッシュする出力パス フィールドで定義されています。 しかし、 プロジェクトツリー では、それらは現在ノードとして表示されているソースファイルに表示されます。
File Watcher を作成する
設定 ダイアログ（Ctrl+Alt+S ）で、 ツール の File Watchers をクリックします。 開く File Watchers ページには、構成済みのファイルウォッチャーのリストが表示されます。
をクリックするか、 Alt+Insert を押します。 使用するツールに応じて、リストから Less、 Sass、 SCSS の事前定義テンプレートを選択します。プログラム フィールドで、選択した事前定義テンプレートに応じてコンパイラーアーカイブへのパスを指定します。
Less 用の lessc 。
Sass/SCSS 用の sass 。
npm を使用して標準インストール手順を実行した場合、PhpStorm は必要なファイルそのものを特定し、自動的にフィールドに入力します。 それ以外の場合は、パスを手動で入力するか、
をクリックして、表示されるダイアログでファイルの場所を選択します。File Watchers に記載されている手順に従います。
サンプル: SCSS を CSS にコンパイルする
プロジェクトが次のように構成されているとします。
ご覧のとおり、 _grid.scss は Page.scss にインポートされます。 以下の例は、プロジェクトを手動または自動で保存するときに Page.scss が CSS にコンパイルされる方法と、 _grid.scss への変更が生成された CSS ファイルにどのように反映されるかを示しています。
SCSS タイプの File Watcher を作成します: 設定 ダイアログを開き (Ctrl+Alt+S)、 に移動して、ツールバーの
をクリックし、リストから SCSS を選択します。
開いた 新しい File Watcher ダイアログでは、必須フィールドはすべてすでに入力されています。
実際、これらの設定は、コンパイラーを正常に実行するのに十分です。
たとえば、 grid.scss を変更して、31 行目の
margin-left: 0;をmargin-left: 12px;に置き換えます。 これにより File Watcher がトリガーされ、コンパイラーが Page.scss を処理します。 その結果、2 つのファイルが生成され、 Page.scss の下にネストされて表示されます:コンパイルされた CSS コードを含む Page.css
デバッグセッション中にアプリをステップスルーできるソースマップを備えた Page.css.map 。
コンパイラーを正常に実行するにはデフォルト設定で十分ですが、ファイルウォッチャーの動作をカスタマイズする方法を確認するために、デフォルト設定を詳しく見ていきましょう。
FileWatcher をトリガーするアクションを変更する
プロジェクトが手動（ または Ctrl+S ）または自動で保存されるとすぐに、File Watcher が起動し、トランスパイラーを起動します。
通常、フォーカスを PhpStorm から移動すると (フレームの非アクティブ化時に)、コードが自動的に保存されます。 File Watchers では、File Watcher のスコープからファイルを編集するときにも自動保存が実行されます。 その結果、入力中は常にトランスパイラが実行され、パフォーマンスの問題が発生する可能性があります。 この問題を解決するには、編集したファイルの自動保存を抑制します。
Ctrl+Alt+S を押して設定を開き、 を選択します。 必要な File Watcher（この例では SCSS ）を選択し、ツールバーの 
をクリックします。 ファイルウォッチャーの編集 ダイアログで、 拡張オプション 領域を展開し、 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにします。
デフォルトでは、File Watcher は、そのスコープ内のファイルが PhpStorm の外部から編集された場合でも起動します。 この動作を無効にして、内部で編集するときにのみファイルをトランスパイルするには、 外部の変更でウォッチャーをトリガーする チェックボックスをオフにします。
スコープを変更する
デフォルトでは、PhpStorm はプロジェクト全体の .scss 拡張子を持つすべてのファイルの変更を監視します。 この例ではこれで動作します。 ただし、たとえば未コミットの変更のみを処理するようにスコープを変更できます。 大規模なプロジェクトでは、これにより時間を節約できます。
Ctrl+Alt+S を押して設定を開き、 を選択します。 必要な File Watcher（この例では SCSS ）を選択し、ツールバーの をクリックします。 ファイルウォッチャーの編集 ダイアログで、リストから該当するスコープを選択します。 詳しくは スコープとファイルの色 を参照してください。
カスタム出力場所
デフォルトでは、生成された .css および .css.map ファイルは元のファイルと同じフォルダーに保存され、 Project ツールウィンドウ (Alt+1) では元のファイルの子ファイルとして表示されます。 このデフォルトの動作を変更して、生成されたすべての .css および .css.map ファイルを別のフォルダーに保存することもできます。
簡単なケースから始めましょう。 プロジェクトルートに custom_output.scss ファイルがあるとします。
たとえば、 custom_output.scss を編集して、6 行目の fill-opacity: abs(50); を fill-opacity: abs(60); に置き換えます。 デフォルトの File Watcher 構成では、生成されたファイル custom_output.css および custom_output.css.map はプロジェクトルートに保存され、 custom_output.scss の子として表示されます。
すべての出力を別のフォルダー（たとえば、 css ）に保存すると便利です。 css フォルダーを出力場所として使用してカスタム SCSS_custom_output ファイルウォッチャーを作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。 そして、 上記の手順に従ってSCSS File Watcher を作成します。
デフォルト設定を次のように更新します。
引数 フィールドに次のように入力します：
$FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.cssリフレッシュする出力パス フィールドに次のように入力します：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
新しいファイルウォッチャーを保存し、有効になっていることを確認します。
ここで、たとえば custom_output.scss を編集する場合、6 行目の fill-opacity: abs(50); を fill-opacity: abs(60); に置き換えると、PhpStorm は css フォルダーを作成し、生成された custom_output.css ファイルと custom_output.css.map ファイルをそのフォルダーに保存します。
カスタム出力場所: 元のフォルダー構造を保持する
次に、 .scss ファイルがフォルダー構造に格納されている例を考えてみましょう。例えば：
デフォルトの File Watcher では、生成されたファイルは元の .scss ファイルの隣に保存されます。
上記のようにカスタム File Watcher を使用すると、生成されたすべてのファイルが同じ css フォルダーに保存されます。
IntelliJ IDEA でフォルダー構造を保持するには、別のカスタム File Watcher を作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。 そして、 上記の手順に従ってSCSS File Watcher を作成します。
デフォルト設定を次のように更新します。
引数 フィールドに次のように入力します：
$FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.cssリフレッシュする出力パス フィールドに次のように入力します：
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
新しいファイルウォッチャーを保存し、有効になっていることを確認します。
ここで、 custom_output_body.scss 、 custom_output_header.scss 、 custom_output_footer.scss を編集すると、PhpStorm は、 styles_structured の構造を保持するサブフォルダーの構造を持つ css フォルダーを作成します。
サンプル: Less を CSS にコンパイルする
プロジェクトが次のように構成されているとします。
以下の例は、プロジェクトを手動または自動で保存するときに my-styles.less が CSS にコンパイルされる方法と、 my-styles.less への変更が生成された CSS ファイルにどのように反映されるかを示しています。
Less タイプの File Watcher を作成します: 設定 ダイアログを開き (Ctrl+Alt+S)、 に移動して、ツールバーの
をクリックし、リストから Less を選択します。
または、エディタータブの上部にある File Watcher が LESS を CSS にコンパイルできるようにしますか？ ペインで、 .less ファイルを含む はい をクリックします。
開いた 新しい File Watcher ダイアログでは、必須フィールドはすべてすでに入力されています。
実際、これらの設定は、コンパイラーを正常に実行するのに十分です。
たとえば、 my-styles.less を変更して、1 行目の
@colorの値を変更します。 これにより File Watcher がトリガーされます。 その結果、2 つのファイルが生成され、 my-styles.less の下にネストされて表示されます:コンパイルされた CSS コードを含む my-styles.css
デバッグセッション中にアプリをステップスルーできるソースマップを備えた my-styles.css.map 。
コンパイラーを正常に実行するにはデフォルト設定で十分ですが、ファイルウォッチャーの動作をカスタマイズする方法を確認するために、デフォルト設定を詳しく見ていきましょう。
FileWatcher をトリガーするアクションを変更する
プロジェクトが手動（ または Ctrl+S ）または自動で保存されるとすぐに、File Watcher が起動し、トランスパイラーを起動します。
通常、フォーカスを PhpStorm から移動すると (フレームの非アクティブ化時に)、コードが自動的に保存されます。 File Watchers では、File Watcher のスコープからファイルを編集するときにも自動保存が実行されます。 その結果、入力中は常にトランスパイラが実行され、パフォーマンスの問題が発生する可能性があります。 この問題を解決するには、編集したファイルの自動保存を抑制します。
Ctrl+Alt+S を押して設定を開き、 を選択します。 必要な File Watcher（この例では Less ）を選択し、ツールバーの をクリックします。 ファイルウォッチャーの編集 ダイアログで、 拡張オプション 領域を展開し、 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにします。
スコープを変更する
デフォルトでは、PhpStorm はプロジェクト全体の .scss 拡張子を持つすべてのファイルの変更を監視します。 この例ではこれで動作します。 ただし、たとえば未コミットの変更のみを処理するようにスコープを変更できます。 大規模なプロジェクトでは、これにより時間を節約できます。
Ctrl+Alt+S を押して設定を開き、 を選択します。 必要な File Watcher（この例では Less ）を選択し、ツールバーの をクリックします。 ファイルウォッチャーの編集 ダイアログで、リストから該当するスコープを選択します。 詳しくは スコープとファイルの色 を参照してください。
カスタム出力場所
デフォルトでは、生成された .css および .css.map ファイルは元のファイルと同じフォルダーに保存され、 Project ツールウィンドウ (Alt+1) では元のファイルの子ファイルとして表示されます。 このデフォルトの動作を変更して、生成されたすべての .css および .css.map ファイルを別のフォルダーに保存することもできます。
簡単なケースから始めましょう。 プロジェクトルートに custom_output.less ファイルがあるとします。
たとえば、 custom_output.less を編集して、1 行目の @color の値を変更します。 デフォルトの File Watcher 構成では、生成されたファイル custom_output.css および custom_output.css.map はプロジェクトルートに保存され、 custom_output.less の子として表示されます。
すべての出力を別のフォルダー（たとえば、 css ）に保存すると便利です。 css フォルダーを出力場所として使用してカスタム Less_custom_output ファイルウォッチャーを作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。 そして、 上記の手順に従ってLess と File Watcher を作成します。
デフォルト設定を次のように更新します。
引数 フィールドに次のように入力します：
$FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-mapリフレッシュする出力パス フィールドに次のように入力します：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
新しいファイルウォッチャーを保存し、有効になっていることを確認します。
ここで、たとえば custom_output.less を編集して 1 行目の @color の値を変更すると、PhpStorm は css フォルダーを作成し、生成された custom_output.css および custom_output.css.map ファイルをそこに格納します。
カスタム出力場所: 元のフォルダー構造を保持する
次に、 .less ファイルがフォルダー構造に格納されている例を考えてみましょう。例えば：
デフォルトの File Watcher では、生成されたファイルは元の .less ファイルの隣に保存されます。
上記のようにカスタム File Watcher を使用すると、生成されたすべてのファイルが同じ css フォルダーに保存されます。
IntelliJ IDEA でフォルダー構造を保持するには、別のカスタム File Watcher を作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。 そして、 上記の手順に従ってLess と File Watcher を作成します。
デフォルト設定を次のように更新します。
引数 フィールドに次のように入力します：
$FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css --source-mapリフレッシュする出力パス フィールドに次のように入力します：
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
新しいファイルウォッチャーを保存し、有効になっていることを確認します。
ここで、 custom_output_body.less 、 custom_output_header.less 、 custom_output_footer.less を編集すると、PhpStorm は、 styles_structured の構造を保持するサブフォルダーの構造を持つ css フォルダーを作成します。
構文ハイライトの構成
Less/Sass/SCSS/PostCSS 対応の構文ハイライトは、お好みに合わせて設定できます。
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
カラースキームを選択し、デフォルトから引き継がれたハイライト設定を受け入れるか、 色とフォント に記載された手順 に従ってカスタマイズしてください。
Sass および SCSS セレクター一式
PhpStorm は Sass および SCSS セレクター — ネストされたセレクターや アンパサンド（&）で作成されたセレクター など — の補完機能を提供します。
Full Line 補完
PhpStorm は、Sass/SCSS、Less、PostCSS コードで Full Line 補完 を提供します。 行全体コード補完機能は、ローカルで実行されるディープラーニングモデルを使用して、コードの行全体を提案します。 PhpStorm ではすぐに利用可能で、追加のライセンスは必要ありません。
行全体コード補完を有効にする
Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | コード補完 | インライン を選択します。
言語モデルを用いたインライン補完を有効化する チェックボックスを選択し、 ローカル （または クラウドとローカル ）オプションが選択されていることを確認します。
ローカルの Full Line 補完候補を有効にする チェックボックスを選択し、 CSS のような チェックボックスが選択されていることを確認します。
検索とナビゲーション
ドキュメントの検索
プロパティと疑似要素については、PhpStorm は対応する MDN 記事からの概要を表示できます。 この概要は ドキュメント ポップアップに表示され、プロパティとその値の簡単な説明と、対応する Web プラットフォームのベースラインステータス(英語)が表示されます。
セレクターの場合、PhpStorm もその 特異性(英語)を示します。
プロパティのドキュメントを表示
プロパティにキャレットを置き、 Ctrl+Q を押すか、メインメニューから を選択します。
プロパティの上にマウスを移動すると、PhpStorm はすぐにその参照を ドキュメント ポップアップに表示します。
この動作をオフにすることも、ポップアップの表示を速くまたは遅くするように設定することもできます。以下の ドキュメントポップ上への動作の構成を参照してください。
ドキュメントポップアップの動作を設定する
コードシンボルの上にマウスを移動したときにドキュメントの自動的な表示をオフにするには、ポップアップで
をクリックし、 マウス移動時に表示する オプションを無効にします。ドキュメント ポップアップを速くまたは遅く表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して、 ドキュメントのポップアップを表示する チェックボックスを選択し、遅延時間を指定してください。
ブラウザーで MDN ドキュメントを開く
ドキュメント ポップアップ Ctrl+Q で、下部のリンクをクリックします。
Shift+F1 を押すか、メインメニューから を選択します。
整形
PhpStorm の組み込みフォーマッタを使用すると、スタイルシートコードの一部だけでなく、ファイルやフォルダー全体を、言語固有のコードスタイル要件に合わせて再フォーマットできます。 また、フォーマッタはコードを生成またはリファクタリングする際に自動的に起動します。
スタイルシート言語のフォーマットを構成するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して、タブとインデント、スペース、中括弧と中括弧、ハードマージンとソフトマージンなどの言語固有の設定を構成します。
設定を変更すると、 Preview 領域に変更が書式にどのように影響するかが表示されます。
CSS、SCSS、Less コンテキストでは、PhpStorm はデフォルトで、
importステートメントおよび URL で生成された文字列リテラルに二重引用符を使用します。 単一引用符を使用するには、「その他 」タブを開き、「引用符 」リストから「単一 」を選択します。再フォーマット後に選択したスタイルをファイル全体に適用するには、リストの 整形時に強制する チェックボックスを選択します。
コードフラグメントを再フォーマットするには、エディターでそれを選択して Ctrl+Alt+L を押します。
ファイルまたはフォルダーを再フォーマットするには、 Project ツールウィンドウ（Alt+1 ）で対象を選択し、 Ctrl+Alt+L を押します。 詳細については、 コードの再フォーマットと再配置を参照してください。
あるいは、 Prettier (Ctrl+Alt+Shift+P) を使用することもできます。
リファクタリング
PhpStorm では、スタイルシートの式を変数に変換し、 .css ファイルの var(--var-name) 構文、 .scss および .sass ファイルの $ 構文を使用してこれらの変数を導入できます。
変数の導入
エディターで、変数に変換する式にキャレットを置き、 Ctrl+Alt+V を押すか、コンテキストメニューまたはメインメニューから を選択します。
選択した式が複数出現する場合は、 複数の出現箇所が見つかりました リストから この出現箇所だけを置換 または 出現箇所をすべて置換 を選択してください。
.scss および .sass の場合、変数の グローバルスコープまたは ローカルスコープを選択します。
赤い枠の付いたフィールドで、提案された変数名をそのまま使用するか、カスタム名を指定します。 準備ができたら Enter を押します。
IntelliJ IDEA を使用すると、CSS、SCSS、Sass、Less ファイル内の既存の宣言から新しいルールセットを作成し、リファクタリングおよびインテンションアクションを使用してルールセット全体をファイル間で移動することさえできます。
ルールセットを導入する
導入する宣言を選択します。 宣言が 1 つだけ必要な場合は、宣言の中にキャレットを置くだけです。
Alt+Enter を押し、リストから ルールセットを導入 を選択します。
PhpStorm は、同じセレクターを使用して新しいルールセットを作成し、それに選択された宣言を移動します。 選択範囲にコメント、ネストしたセレクタなどが含まれている場合、それらも新しいルールセットに移動されます。
ルールセットを他のファイルに移動する
ルールセット内の移動する任意の場所にキャレットを置き、 F6 を押します。
表示されたダイアログで、ルールセットを移動するファイルを指定します。 指定されたファイルが存在しない場合、PhpStorm はそれを作成することを提案します。
デフォルトでは、PhpStorm はルールセットが移動されるファイルを自動的に開きます。 この動作を変更するには、 エディターで開く チェックボックスをオフにします。
コピー、 移動、 名前変更などの一般的なリファクタリングも利用できます。
ブラウザーとの互換性を確認する
ドキュメントポップアップで検索するだけでなく、その場で特定のブラウザーとの互換性についてスタイルシートのプロパティを確認できます。 このインスペクションは MDN ブラウザー互換性データ(英語)に基づいており、対象のブラウザーのいずれかでプロパティがサポートされていない場合は常に警告を表示します。
互換性チェックをオンにする
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
CSS ノードを展開して プロパティは選択されたブラウザーと互換性がありません を選択します。 Options エリアで、ターゲットにするブラウザーとその最小バージョンを選択します。
Options 領域で、プロパティの可用性を確認するブラウザーを選択します。 選択したブラウザーのターゲットバージョンを指定します。
色の管理
PhpStorm は、 CSS 色管理のサポートを提供し、 コード補完、 クイックドキュメント検索、 色のプレビューが含まれます。 絶対色、相対色、混合色のコーディング支援が提供されます。
色を指定する
色の変更
ガター内のカラーアイコンをクリックし、ポップアップで目的の色を選択します。
もしくは、キャレットを色のプロパティに置き、 Alt+Enter を押して、リストから 色の変更 を選択し、ポップアップで必要な色を選びます。
カラープレビューを切り替える
PhpStorm は絶対色、相対色、混合色のプレビューを表示します。
デフォルトでは、PhpStorm はカラープレビューをガター内のアイコンとして表示します。 背景にカラープレビューを表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して CSS 色プレビューを背景として表示する チェックボックスをオンにします。
カラープレビューガターアイコンを復元するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動して、 共通 領域の 色プレビュー チェックボックスを選択します。
タグに適用されたスタイルを表示する
HTML および XHTML ファイルでは、PhpStorm は任意のタグに適用されたすべてのスタイルを表示できます。
タグのコンテキストメニューから を選択します。
PhpStorm は 2 つのペインを持つ CSS スタイル ツールウィンドウを開き、左側のペインにはタグのスタイル、右側のペインにはその定義が表示されます。 タグごとに、PhpStorm は個別のタブを開きます。
ツールウィンドウから、ソースコード内のタグとプロパティの定義に移動できます。
タグに移動するには、左側のペインのツールバーの
をクリックします。プロパティの定義に移動するには、左側のペインでそれを選択し、右側のペインのツールバーの
をクリックします。