PhpStorm 2024.1 ヘルプ

Sass、SCSS、Less

PhpStorm は、Sass(英語)、Less(英語)、SCSS(英語) コードを CSS(英語) に変換するコンパイラーと統合します。PhpStorm でコンパイラーを使用するには、関連する事前定義済みテンプレートに基づいて、ファイル監視としてコンパイラーを構成する必要があります。

始める前に

  1. お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

  2. 設定 | プラグインページのインストール済みタブで、CSS、Sass、Less、ファイル監視の必須プラグインが有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。

Sass/SCSS のインストール

Less のインストール

コードを CSS にコンパイルする

コードを自動的にコンパイルするには、コンパイラーをインストールし、ファイルへの変更を追跡してコンパイラーを実行する Sass、Less、SCSS ファイルウォッチャーを構成する必要があります。

ファイルを開くと、PhpStorm は、該当するファイル監視が現在のプロジェクトで使用可能かどうかを確認します。そのようなファイル監視が構成されているが無効になっている場合、PhpStorm は、構成されたファイル監視について通知し、有効にすることを提案するポップアップを表示します。

現在のプロジェクトで該当するファイル監視が構成されて有効になっている場合、PhpStorm は新規ウォッチャーダイアログで指定されたイベントで自動的にコンパイラーを起動します。

  • 編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐにファイル監視が呼び出されます。

  • 編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにすると、ファイルウォッチャーは保存（ファイル | すべて保存、Ctrl+S）または PhpStorm からのフォーカス移動時（フレーム非アクティブ化時）に開始されます。

ファイル監視の詳細を参照してください。

PhpStorm は生成された出力で別のファイルを作成します。ファイルの名前は、ソース Sass、Less、SCSS ファイルの名前と拡張子 .css です。生成されたファイルの場所は、新規ウォッチャーダイアログのリフレッシュする出力パスフィールドで定義されています。しかし、プロジェクトツリーでは、それらは現在ノードとして表示されているソースファイルに表示されます。

ファイルウォッチャーを作成する

  1. 設定ダイアログ（Ctrl+Alt+S）で、ツールのファイル監視をクリックします。開くファイルウォッチャーページには、構成済みのファイルウォッチャーのリストが表示されます。

  2. Add button をクリックするか、Alt+Insert を押します。使用するツールに応じて、リストから Less、Sass、SCSS の事前定義テンプレートを選択します。

  3. プログラムフィールドで、選択した事前定義テンプレートに応じてコンパイラーアーカイブへのパスを指定します。

    • Less 用の lessc。

    • Sass/SCSS 用の sass。

    npm を使用して標準インストール手順を実行した場合、PhpStorm は必要なファイルそのものを特定し、自動的にフィールドに入力します。それ以外の場合は、パスを手動で入力するか、the Browse button をクリックして、表示されるダイアログでファイルの場所を選択します。

  4. ファイル監視に記載されている手順に従います。

サンプル: SCSS を CSS にコンパイルする

プロジェクトが次のように構成されているとします。

Compiling SCSS into CSS: project structure

ご覧のとおり、_grid.scss は Page.scss にインポートされます。以下の例は、プロジェクトを手動または自動で保存するときに Page.scss が CSS にコンパイルされる方法と、_grid.scss への変更が生成された CSS ファイルにどのように反映されるかを示しています。

  1. SCSS タイプのファイルウォッチャーを作成します。設定ダイアログ (Ctrl+Alt+S) を開き、ツール | ファイル監視に移動し、ツールバーの the Add button をクリックして、リストから SCSS を選択します。

    Compiling SCSS into CSS: creating a File Watcher

  2. 開いた新しいファイルウォッチャーダイアログでは、すべての必須フィールドがすでに入力されています。

    SCSS File Watcher: settings

    実際、これらの設定は、コンパイラーを正常に実行するのに十分です。

  3. grid.scss を変更してみましょう。たとえば、31 行目の margin-left: 0; を margin-left: 12px; に置き換えます。これにより、ファイルウォッチャーがトリガーされ、コンパイラーが Page.scss を処理します。その結果、2 つのファイルが生成され、Page.scss にネストされて表示されます。

    • コンパイルされた CSS コードを含む Page.css

    • デバッグセッション中にアプリをステップスルーできるソースマップを備えた Page.css.map。

    SCSS File Watcher: a CSS file generated

コンパイラーを正常に実行するにはデフォルト設定で十分ですが、ファイルウォッチャーの動作をカスタマイズする方法を確認するために、デフォルト設定を詳しく見ていきましょう。

FileWatcher をトリガーするアクションを変更する

プロジェクトが手動（ファイル | すべて保存または Ctrl+S）または自動で保存されるとすぐに、ファイル監視が起動し、トランスパイラーを起動します。

一般に、PhpStorm からフォーカスを移動すると（フレームの非アクティブ化時）、コードは自動的に保存されます。ファイルウォッチャーを使用すると、ファイルウォッチャーのスコープからファイルを編集するときにも自動保存が実行されます。その結果、入力中はトランスパイラーが実行されている可能性があり、パフォーマンスの問題が発生する可能性があります。この問題を解決するには、編集したファイルの自動保存を抑制します。

Ctrl+Alt+S を押して設定を開き、ツール | ファイル監視を選択します。必要なファイルウォッチャー (この例では SCSS) を選択し、ツールバーの the Edit button をクリックします。ファイルウォッチャーの編集ダイアログで、拡張オプション領域を展開し、編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにします。

Auto-save edited files off

デフォルトでは、ファイルウォッチャーは、そのスコープのファイルが PhpStorm の外部から編集されている場合でもウェイクアップします。この動作をオーバーライドし、内部編集でのみファイルをトランスパイルするには、外部の変更でウォッチャーをトリガーするチェックボックスをオフにします。

Trigger the File Watcher on external changes is off

スコープを変更する

デフォルトでは、PhpStorm は、プロジェクト全体で .scss 拡張子を持つすべてのファイルの変更を監視します。これは、この例では機能します。ただし、処理するスコープを変更できます。たとえば、コミットされていない変更のみを変更できます。大スコープなプロジェクトでは、これにより時間を節約できます。

Ctrl+Alt+S を押して設定を開き、ツール | ファイル監視を選択します。必要なファイルウォッチャー (この例では SCSS) を選択し、ツールバーの the Edit button をクリックします。ファイルウォッチャーの編集ダイアログで、リストから該当するスコープを選択します。詳細については、スコープとファイルの色を参照してください。

SCSS File Watcher: change default scope

カスタム出力場所

デフォルトでは、生成された .css ファイルと .css.map ファイルは、元のファイルがあるフォルダーに保存され、プロジェクトツールウィンドウにその子として表示されます。このデフォルトの動作を変更して、生成されたすべての .css ファイルと .css.map ファイルを別のフォルダーに保存できます。

簡単なケースから始めましょう。プロジェクトルートに custom_output.scss ファイルがあるとします。

Project structure

custom_output.scss を編集してみましょう。たとえば、6 行目の fill-opacity: abs(50); を fill-opacity: abs(60); に置き換えます。デフォルトの FileWatcher 構成では、生成されたファイル custom_output.css および custom_output.css.map はプロジェクトルートに保存され、custom_output.scss の子として表示されます。

Default settings: the output is stored in the project root

すべての出力を別のフォルダー（たとえば、css）に保存すると便利です。css フォルダーを出力場所として使用してカスタム SCSS_custom_output ファイルウォッチャーを作成しましょう。

Ctrl+Alt+S を押して設定を開き、ツール | ファイル監視を選択します。次に、上記の説明に従って SCSS ファイルウォッチャーを作成します。

デフォルト設定を次のように更新します。

  • 引数フィールドに次のように入力します。

    $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css

  • リフレッシュする出力パスフィールドに次のように入力します。

    $ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
New File Watcher with custom output path

新しいファイルウォッチャーを保存し、有効になっていることを確認します。

New File Watcher with custom output path saved and enabled

ここで、たとえば custom_output.scss を編集する場合、6 行目の fill-opacity: abs(50); を fill-opacity: abs(60); に置き換えると、PhpStorm は css フォルダーを作成し、生成された custom_output.css ファイルと custom_output.css.map ファイルをそのフォルダーに保存します。

Custom settings: the output is stored in a separate folder

カスタム出力場所: 元のフォルダー構造を保持する

ここで、.scss ファイルがフォルダー構造に格納されている例を考えてみましょう。例:

Project structure

デフォルトのファイルウォッチャーでは、生成されたファイルは元の .scss ファイルの隣に保存されます。上記のようにカスタムファイルウォッチャーを使用すると、生成されたすべてのファイルが 1 つの同じ css フォルダーに保存されます。

Custom output: the generated files are stored in a separate folder in a plain structure

PhpStorm にフォルダー構造を保持させるために、別のカスタムファイルウォッチャーを作成しましょう。

Ctrl+Alt+S を押して設定を開き、ツール | ファイル監視を選択します。次に、上記の説明に従って SCSS ファイルウォッチャーを作成します。

デフォルト設定を次のように更新します。

  • 引数フィールドに次のように入力します。

    $FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css

  • リフレッシュする出力パスフィールドに次のように入力します。

    $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
Custom output with folder structure: File Watcher updated

新しいファイルウォッチャーを保存し、有効になっていることを確認します。

Custom output with folder structure: File Watcher saved and enabled

ここで、custom_output_body.scss、custom_output_header.scss、custom_output_footer.scss を編集すると、PhpStorm は、styles_structured の構造を保持するサブフォルダーの構造を持つ css フォルダーを作成します。

Custom settings: the output is stored in a separate folder, the structure preserved

サンプル: Less を CSS にコンパイルする

プロジェクトが次のように構成されているとします。

Compiling Less into CSS: project structure

以下の例は、プロジェクトを手動または自動で保存するときに my-styles.less が CSS にコンパイルされる方法と、my-styles.less への変更が生成された CSS ファイルにどのように反映されるかを示しています。

  1. Less タイプのファイルウォッチャーを作成します。設定ダイアログ (Ctrl+Alt+S) を開き、ツール | ファイル監視に移動し、ツールバーの the Add button をクリックして、リストから Less を選択します。

    Compiling Less into CSS: creating a File Watcher

    または、エディタータブの上部にある File Watcher が LESS を CSS にコンパイルできるようにしますか？ ペインで、.less ファイルを含むはいをクリックします。

    Compiling Less to CSS: creating a File Watcher from the pane in the editor

  2. 開いた新しいファイルウォッチャーダイアログでは、すべての必須フィールドがすでに入力されています。

    Less File Watcher: settings

    実際、これらの設定は、コンパイラーを正常に実行するのに十分です。

  3. my-styles.less を変更してみましょう。たとえば、行 1 の @color の値を変更します。これにより、ファイル監視がトリガーされます。その結果、2 つのファイルが生成され、my-styles.less にネストされて表示されます。

    • コンパイルされた CSS コードを含む my-styles.css

    • デバッグセッション中にアプリをステップスルーできるソースマップを備えた my-styles.css.map。

    Less File Watcher: a CSS file is generated

コンパイラーを正常に実行するにはデフォルト設定で十分ですが、ファイルウォッチャーの動作をカスタマイズする方法を確認するために、デフォルト設定を詳しく見ていきましょう。

FileWatcher をトリガーするアクションを変更する

プロジェクトが手動（ファイル | すべて保存または Ctrl+S）または自動で保存されるとすぐに、ファイル監視が起動し、トランスパイラーを起動します。

一般に、PhpStorm からフォーカスを移動すると（フレームの非アクティブ化時）、コードは自動的に保存されます。ファイルウォッチャーを使用すると、ファイルウォッチャーのスコープからファイルを編集するときにも自動保存が実行されます。その結果、入力中はトランスパイラーが実行されている可能性があり、パフォーマンスの問題が発生する可能性があります。この問題を解決するには、編集したファイルの自動保存を抑制します。

Ctrl+Alt+S を押して設定を開き、ツール | ファイル監視を選択します。必要なファイルウォッチャー (この例では Less) を選択し、ツールバーの the Edit button をクリックします。ファイルウォッチャーの編集ダイアログで、拡張オプション領域を展開し、編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにします。

Auto-save edited files off

スコープを変更する

デフォルトでは、PhpStorm は、プロジェクト全体で .scss 拡張子を持つすべてのファイルの変更を監視します。これは、この例では機能します。ただし、処理するスコープを変更できます。たとえば、コミットされていない変更のみを変更できます。大スコープなプロジェクトでは、これにより時間を節約できます。

Ctrl+Alt+S を押して設定を開き、ツール | ファイル監視を選択します。必要なファイルウォッチャー (この例では Less) を選択し、ツールバーの the Edit button をクリックします。ファイルウォッチャーの編集ダイアログで、リストから該当するスコープを選択します。詳細については、スコープとファイルの色を参照してください。

SCSS File Watcher: change default scope

カスタム出力場所

デフォルトでは、生成された .css ファイルと .css.map ファイルは、元のファイルがあるフォルダーに保存され、プロジェクトツールウィンドウにその子として表示されます。このデフォルトの動作を変更して、生成されたすべての .css ファイルと .css.map ファイルを別のフォルダーに保存できます。

簡単なケースから始めましょう。プロジェクトルートに custom_output.less ファイルがあるとします。

Project structure

たとえば、custom_output.less を編集して、1 行目の @color の値を変更します。デフォルトのファイル監視構成では、生成されたファイル custom_output.css および custom_output.css.map はプロジェクトルートに保存され、custom_output.less の子として表示されます。

Default settings: the output is stored in the project root

すべての出力を別のフォルダー（たとえば、css）に保存すると便利です。css フォルダーを出力場所として使用してカスタム Less_custom_output ファイルウォッチャーを作成しましょう。

Ctrl+Alt+S を押して設定を開き、ツール | ファイル監視を選択します。次に、上記の説明に従って Less ファイルウォッチャーを作成します。

デフォルト設定を次のように更新します。

  • 引数フィールドに次のように入力します。

    $FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-map

  • リフレッシュする出力パスフィールドに次のように入力します。

    $ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
New File Watcher with custom output path

新しいファイルウォッチャーを保存し、有効になっていることを確認します。

New File Watcher with custom output path saved and enabled

ここで、たとえば custom_output.less を編集して 1 行目の @color の値を変更すると、PhpStorm は css フォルダーを作成し、生成された custom_output.css および custom_output.css.map ファイルをそこに格納します。

Custom settings: the output is stored in a separate folder

カスタム出力場所: 元のフォルダー構造を保持する

ここで、.less ファイルがフォルダー構造に格納されている例を考えてみましょう。例:

Project structure

デフォルトのファイルウォッチャーでは、生成されたファイルは元の .less ファイルの隣に保存されます。上記のようにカスタムファイルウォッチャーを使用すると、生成されたすべてのファイルが 1 つの同じ css フォルダーに保存されます。

Custom output: the generated files are stored in a separate folder in a plain structure

PhpStorm にフォルダー構造を保持させるために、別のカスタムファイルウォッチャーを作成しましょう。

Ctrl+Alt+S を押して設定を開き、ツール | ファイル監視を選択します。次に、上記の説明に従って Less ファイルウォッチャーを作成します。

デフォルト設定を次のように更新します。

  • 引数フィールドに次のように入力します。

    $FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css --source-map

  • リフレッシュする出力パスフィールドに次のように入力します。

    $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
Custom output with folder structure: File Watcher updated

新しいファイルウォッチャーを保存し、有効になっていることを確認します。

Custom output with folder structure: File Watcher saved and enabled

ここで、custom_output_body.less、custom_output_header.less、custom_output_footer.less を編集すると、PhpStorm は、styles_structured の構造を保持するサブフォルダーの構造を持つ css フォルダーを作成します。

Custom settings: the output is stored in a separate folder, the structure preserved

構文ハイライトの構成

好みや習慣に応じて、Less/Sass/SCSS 対応の構文ハイライトを設定できます。

  1. 設定ダイアログ（Ctrl+Alt+S）で、エディター | カラースキームの切り替え | Less/Sass/SCSS に移動します。

  2. 配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。

CSS の最小化 Compass アプリケーションの Sass および SCSS

関連ページ：

ファイル監視

ファイル監視は、ファイルの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行する PhpStorm システムです。PhpStorm は、多数の標準的な一般的なサードパーティツール (コンパイラー、コンプレッサー、整形ツールなど) 用に定義済みのファイルウォッチャーテンプレートを提供するカスタムファイル監視を設定して、他のサードパーティツールを実行することもできます。ファイルウォッチャーには、2 つの専用コードインスペクションがあります。ファイル監視使用可能インスペクションは、あら...

外部ツール

サードパーティのコマンドラインアプリケーションを外部ツールとして構成して、PhpStorm から実行します。例: ワークフローでは、特定のスクリプト、コードジェネレーター、アナライザー、プリプロセッサーまたはポストプロセッサー、データベースユーティリティなどの実行が必要になる場合があります。外部ツールとして構成することにより、PhpStorm は専用のアクションを提供します。これは、メインメニューや特定のコンテキストメニューから実行したり、ショートカットを割り当てたり、特定の実行構成を起動すると...

プラグインのインストール

プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...

新規ウォッチャーダイアログ

ファイルウォッチャーページの追加、または編集、ボタンをクリックするとダイアログが開きます。ダイアログを使用して、事前定義済み PhpStorm File Watcher テンプレートに基づいてプロジェクトファイル監視を作成するか、既存のプロジェクトファイル監視を編集します。各テンプレートには、選択したツールに最適な設定が含まれています。ほとんどの場合、必要なのは、ツールの実行可能ファイルへのパスを指定することだけです。名前：「名前」フィールドに、ファイル監視の名前を入力します。デフォルトでは、...

スコープとファイルの色

スコープは、プロジェクト内のファイルとフォルダーのグループです。スコープを使用して、さまざまな IDE ビューでプロジェクト項目を視覚的に区別し、特定の操作の範囲を制限できます。スコープは、プロジェクト内のファイルを論理的に編成するように設計されています。テストソースはテスト関連のスコープに移動でき、製品コードは製品ファイルのスコープに関連付けることができます。これらの論理チャンクにより、プロジェクトの管理が容易になります。例: テスト関連のインスペクションをテストクラスでのみ実行すると、アプリ...

色とフォント

開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。PhpStorm では、IDE テキストで使用される色とフォントを定義する構成可能な配色から選択できます。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。このビデオを見て、PhpStorm のカスタマイズの...