Compass アプリケーションの Sass および SCSS
PhpStorm の Compass のサポート(英語)を使用すると、Compass アプリケーションの Sass または SCSS スタイルシートが自動的に CSS にコンパイルされます。
始める前に
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Compass プラグインをインストールして有効にします。
設定で File Watchers プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、 を選択します。インストール済みタブをクリックします。検索フィールドに File Watchers と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
Compass のインストール
埋め込まれたターミナル(Alt+F12)で、次のように入力します。
gem install compass
Compass は、Ruby 実行ファイルと gem.bat ファイルが格納されているフォルダーにインストールされます。
新しい Compass アプリケーションの作成
Compass アプリケーションがまだない場合は、それを作成するか、空の PhpStorm プロジェクトに Compass サポートを追加できます。いずれの場合も、conf.rb 構成ファイルが生成されます。
埋め込まれたターミナル(Alt+F12)で、次のように入力します。
compass create <the name of the application to be created>
空の PhpStorm プロジェクトを作成し、埋め込まれたターミナル(Alt+F12)を開いて、次のように入力します。
cd <application folder> compass init
アプリケーションで Compass 対応のサポートをアクティブ化する
.sass または .scss ファイルを開く、
@import 'compass'
ステートメントの横にある赤いバルブをクリックするか Alt+Enter を押してから、候補リストから Compass の設定を選択します。コンパスのサポートを使用可能にするチェックボックスを選択し、Compass 実行ファイルと conf.rb 構成ファイルへのパスを指定します。
既存の Compass アプリケーションから開始する
すでにマシン上にあるアプリケーションソースを開く
ウェルカム画面でオープンをクリックするか、メインメニューから を選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ウェルカム画面でリポジトリのクローンをクリックします。
あるいは、メインメニューから
、 、 を選択します。メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。
Sass と SCSS のコンパイル
コードを自動的にコンパイルするには、コンパイラーをインストールし、ファイルへの変更を追跡してコンパイラーを実行する Compass Sass または Compass 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 または SCSS ファイルで、拡張子は .css です。生成されたファイルの場所は、新規ウォッチャーダイアログのリフレッシュする出力パスフィールドで定義されています。しかし、プロジェクトツリーでは、それらは現在ノードとして表示されているソースファイルに表示されます。
File Watcher を作成する
設定ダイアログ(Ctrl+Alt+S)で、ツールの File Watchers をクリックします。開く File Watchers ページには、構成済みのファイルウォッチャーのリストが表示されます。
をクリックするか、Alt+Insert を押します。使用するツールに応じて、リストから定義済みテンプレート compass sass または compass scss を選択します。新規ウォッチャーダイアログが開きます。
プログラムフィールドで、実行可能ファイルへのパスを指定します。
Windows 用 compass.bat
Unix 用 compass および macOS
引数フィールドに、使用するオペレーティングシステムに応じて、次のいずれかを入力します。
ディレクトリ全体を処理する
compile $UnixSeparators($ProjectFileDir$)$
1 つのファイルを処理する
compile $UnixSeparators($FilePath$)$
ディレクトリ全体を処理する
compile $ProjectFileDir$
1 つのファイルを処理する
compile $ProjectFileDir$ $FilePath$
ディレクトリ全体を処理する
compile $ProjectFileDir$
1 つのファイルを処理する
compile $ProjectFileDir$ $FilePath$
File Watchers に記載されている手順に従います。
関連ページ:

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

GitHub でホストされているプロジェクトを管理する
プロジェクトをチェックアウトする (クローン):PhpStorm から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の...

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

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

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

Sass、SCSS、Less
PhpStorm は、Sass、Less、SCSS コードを CSS に変換するコンパイラーと統合します。PhpStorm でコンパイラーを使用するには、関連する事前定義済みテンプレートに基づいて、File Watcher としてコンパイラーを構成する必要があります。始める前に:お使いのコンピューターに Node.js がインストールされていることを確認してください。設定 | プラグインページのインストール済みタブで、CSS、Sass、Less、File Watchers の必須プラグインが有効になっている...