IntelliJ IDEA 2026.2 Help

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

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

始める前に

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

  2. JetBrains Marketplace からプラグインをインストールする説明に従って、 Compass および File Watchers プラグインを 設定 | プラグイン ページの Marketplace タブにインストールします。 プラグインは Ultimate サブスクリプション付きの IntelliJ IDEA でのみ利用できます。

Compass のインストール

  • コマンドライン シェルまたは組み込みの ターミナル (Alt+F12) で、次を入力してください：

    gem install compass

    Compass は、Ruby 実行ファイルと gem.bat ファイルが格納されているフォルダーにインストールされます。

新しい Compass アプリケーションの作成

Compass アプリケーションがまだない場合は、それを作成するか、空の IntelliJ IDEA プロジェクトに Compass サポートを追加できます。 いずれの場合も、 conf.rb 構成ファイルが生成されます。

  • コマンドライン シェルまたは組み込みの ターミナル (Alt+F12) で、次を入力してください：

    compass create <the name of the application to be created>

  • 空の IntelliJ IDEA プロジェクトを作成し、コマンドライン シェルまたは埋め込まれた ターミナル （Alt+F12 ）を開いて、次のように入力します：

    cd <application folder> compass init

アプリケーションで Compass 対応のサポートをアクティブ化する

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

  2. コンパスのサポートを使用可能にする チェックボックスを選択し、Compass 実行ファイルと conf.rb 構成ファイルへのパスを指定します。

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

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

  • ようこそ 画面で 開くまたはインポート をクリックするか、メインメニューから ファイル | オープン を選択します。 開いたダイアログで、ソースが保存されているフォルダーを選択します。

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

  1. ようこそ 画面で リポジトリのクローン をクリックします。

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

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

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

Sass と SCSS のコンパイル

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

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

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

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

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

File Watchers の詳細を参照してください。

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

File Watcher を作成する

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

  2. Add button をクリックするか、 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 年 7 月 14 日
Sass、SCSS、Less、PostCSSStylelint