PhpStorm 2026.1 Help

Compass アプリケーションの Sass および SCSS

PhpStorm の Compass サポートを利用すると、Compass アプリケーションの Sass または SCSS スタイルシートが自動的に CSS にコンパイルされます。

始める前に

  1. Ruby をダウンロードしてインストールします(英語)。

  2. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの Marketplace タブに Compass プラグインをインストールして有効にします。

  3. 設定で 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 対応のサポートをアクティブ化する

  1. .sass または .scss ファイルを開く、 @import 'compass' ステートメントの横にある赤いバルブをクリックするか Alt+Enter を押してから、候補リストから Compass の設定 を選択します。

  2. Compass サポート有効化 チェックボックスを選択し、Compass 実行ファイルと conf.rb 構成ファイルへのパスを指定します。

既存の Compass アプリケーションから開始する

すでにマシン上にあるアプリケーションソースを開く

  • ウェルカム 画面で Open をクリックするか、メインメニューから ファイル | ディレクトリを開く を選択します。 開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースをチェックアウト

  1. ウェルカム 画面で リポジトリのクローン をクリックします。

    あるいは、メインメニューから ファイル | 新規 | バージョン管理からプロジェクト…、 Git | クローン…、 VCS | バージョン管理から取得 を選択します。

    メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。 例： Mercurial または Perforce​​。

  2. 表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。 詳細については、 プロジェクトをチェックアウトする (クローン)を参照してください。

Sass と SCSS のコンパイル

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

ファイルを開くと、PhpStorm は現在のプロジェクトで該当するファイルウォッチャーが利用可能かどうか確認します。 該当するファイルウォッチャーが構成済みですが無効な場合、PhpStorm は構成済みのファイルウォッチャーを通知し、有効化を提案するポップアップを表示します。

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

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

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

詳細については File Watchers を参照してください。

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

File Watcher を作成する

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

  2. 追加ボタン をクリックするか、 Alt+Insert を押します。 使用するツールに応じて、リストから定義済みテンプレート compass sass または compass scss を選択します。 新規ウォッチャーダイアログが開きます。

  3. プログラム フィールドで、実行可能ファイルへのパスを指定します。

    • Windows 用 compass.bat

    • Unix 用 compass および macOS

  4. 引数 フィールドに、使用するオペレーティングシステムに応じて、次のいずれかを入力します。

    • ディレクトリ全体を処理する compile $UnixSeparators($ProjectFileDir$)$

    • 1 つのファイルを処理する compile $UnixSeparators($FilePath$)$

    • ディレクトリ全体を処理する compile $ProjectFileDir$

    • 1 つのファイルを処理する compile $ProjectFileDir$ $FilePath$

    • ディレクトリ全体を処理する compile $ProjectFileDir$

    • 1 つのファイルを処理する compile $ProjectFileDir$ $FilePath$

  5. File Watchers に記載された手順で進めてください。

2026 年 5 月 22 日
Sass、SCSS、Less、PostCSSStylelint