Compass アプリケーションの Sass および SCSS
始める前
設定 | プラグイン ページの マーケットプレース タブで Compass と File Watchers プラグインを、 JetBrains Marketplace からプラグインをインストールするの説明に従ってインストールしてください。 プラグインは PyCharm Pro でのみ利用できます。
Compass のインストール
組み込み ターミナル (Alt+F12) で次のように入力します。
gem install compassCompass は、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 対応のサポートをアクティブ化する
.sass または .scss ファイルを開く、
@import 'compass'ステートメントの横にある赤いバルブをクリックするか Alt+Enter を押してから、候補リストから Compass の設定 を選択します。Compass のサポートを有効化する チェックボックスを選択し、Compass 実行ファイルと conf.rb 構成ファイルへのパスを指定します。
既存の Compass アプリケーションから開始する
すでにマシン上にあるアプリケーションソースを開く
ようこそ 画面の左側のペインで オープン をクリックするか、メインメニューから を選択します。 開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ようこそ 画面の左側のペインで クローン をクリックします。
あるいは、メインメニューから 、 、 を選択します。
メインメニューの Gitサポート の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。 例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。 詳細については、 プロジェクトをチェックアウトする (クローン) を参照してください。
Sass と SCSS のコンパイル
コードを自動的にコンパイルするには、コンパイラーをインストールし、ファイルへの変更を追跡してコンパイラーを実行する Compass Sass または Compass SCSS File Watcher を構成する必要があります。
ファイルを開くと、PyCharm は現在のプロジェクトで適用できる File Watcher が利用可能か確認します。 そのような File Watcher が構成されているものの無効になっている場合、PyCharm は設定された File Watcher について案内し、有効化を提案するポップアップを表示します。
現在のプロジェクトで該当する File Watcher が構成され有効になっている場合、PyCharm は New Watcher ダイアログ で指定されたイベント時に自動的にコンパイラーを起動します。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスがオフの場合、保存時(、 Ctrl+S )または PyCharm からフォーカスを外したとき(フレームの非アクティブ時)に File Watcher が起動します。
詳細は File Watchers をご覧ください。
PyCharm は、生成された出力を別ファイルとして作成します。 ファイルの名前はソース 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 に記載されている手順に従ってください。