PyCharm 2024.3 ヘルプ

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

始める前に

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

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

  3. 設定で File Watchers プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに File Watchers と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

Compass のインストール

  • 埋め込まれたターミナルAlt+F12)で、次のように入力します。

    gem install compass

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

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

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

  • 埋め込まれたターミナルAlt+F12)で、次のように入力します。

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

  • 空の PyCharm プロジェクトを作成し、埋め込まれたターミナル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 を構成する必要があります。

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

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

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

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

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

PyCharm は生成された出力で別のファイルを作成します。ファイルの名前はソース 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 に記載されている手順に従います。

関連ページ:

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

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

GitHub でホストされているプロジェクトを管理する

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

外部ツール

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

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

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

File Watchers

File Watcher は PyCharm ツールであり、IDE でファイルを変更または保存するときに、コンパイラー、フォーマッタ、リンターなどのコマンドラインツールを自動的に実行できます。File Watchers には 2 つの専用コードインスペクションがあります。ファイル監視使用可能インスペクションは、定義済みの File Watcher が適用可能なすべてのファイルで実行されます。プロジェクトに関連する File Watcher が設定されていない場合、PyCharm は追加することを提...

Sass、SCSS、Less

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