Sass、SCSS、Less

PyCharm は、Sass(英語)、Less(英語)、SCSS(英語) コードを CSS(英語) に変換するコンパイラーと統合します。PyCharm でコンパイラーを使用するには、関連する事前定義済みテンプレートに基づいて、File Watcher としてコンパイラーを構成する必要があります。

始める前に

お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定 | プラグインページのインストール済みタブで、CSS、Sass、Less、File Watchers の必須プラグインが有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。

Sass/SCSS のインストール

埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install -g sass
Sass オフィシャル Web サイト(英語)の詳細を参照してください。

Less のインストール

埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install --global less
Less オフィシャル Web サイト(英語)の詳細を参照してください。

コードを CSS にコンパイルする

コードを自動的にコンパイルするには、コンパイラーをインストールし、ファイルへの変更を追跡してコンパイラーを実行する Sass、Less、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、Less、SCSS ファイルの名前と拡張子 .css です。生成されたファイルの場所は、新規ウォッチャーダイアログのリフレッシュする出力パスフィールドで定義されています。しかし、プロジェクトツリーでは、それらは現在ノードとして表示されているソースファイルに表示されます。

File Watcher を作成する

設定ダイアログ（Ctrl+Alt+S）で、ツールの File Watchers をクリックします。開く File Watchers ページには、構成済みのファイルウォッチャーのリストが表示されます。
をクリックするか、Alt+Insert を押します。使用するツールに応じて、リストから Less、Sass、SCSS の事前定義テンプレートを選択します。
プログラムフィールドで、選択した事前定義テンプレートに応じてコンパイラーアーカイブへのパスを指定します。
- Less 用の lessc。
- Sass/SCSS 用の sass。
npm を使用して標準インストール手順を実行した場合、PyCharm は必要なファイルそのものを特定し、自動的にフィールドに入力します。それ以外の場合は、パスを手動で入力するか、をクリックして、表示されるダイアログでファイルの場所を選択します。
File Watchers に記載されている手順に従います。

サンプル: SCSS を CSS にコンパイルする

プロジェクトが次のように構成されているとします。

Compiling SCSS into CSS: project structure

ご覧のとおり、_grid.scss は Page.scss にインポートされます。以下の例は、プロジェクトを手動または自動で保存するときに Page.scss が CSS にコンパイルされる方法と、_grid.scss への変更が生成された CSS ファイルにどのように反映されるかを示しています。

SCSS タイプのファイルウォッチャーを作成します。設定ダイアログ (Ctrl+Alt+S) を開き、ツール | File Watchers に移動し、ツールバーのをクリックして、リストから SCSS を選択します。
開いた新しいファイルウォッチャーダイアログでは、すべての必須フィールドがすでに入力されています。
実際、これらの設定は、コンパイラーを正常に実行するのに十分です。
grid.scss を変更してみましょう。たとえば、31 行目の margin-left: 0; を margin-left: 12px; に置き換えます。これにより、ファイルウォッチャーがトリガーされ、コンパイラーが Page.scss を処理します。その結果、2 つのファイルが生成され、Page.scss にネストされて表示されます。
- コンパイルされた CSS コードを含む Page.css
- デバッグセッション中にアプリをステップスルーできるソースマップを備えた Page.css.map。

コンパイラーを正常に実行するにはデフォルト設定で十分ですが、ファイルウォッチャーの動作をカスタマイズする方法を確認するために、デフォルト設定を詳しく見ていきましょう。

FileWatcher をトリガーするアクションを変更する

プロジェクトが手動（ファイル | すべて保存または Ctrl+S）または自動で保存されるとすぐに、File Watcher が起動し、トランスパイラーを起動します。

通常、フォーカスを PyCharm から移動すると (フレームの非アクティブ化時に)、コードが自動的に保存されます。File Watchers では、File Watcher のスコープからファイルを編集するときにも自動保存が実行されます。その結果、入力中は常にトランスパイラが実行され、パフォーマンスの問題が発生する可能性があります。この問題を解決するには、編集したファイルの自動保存を抑制します。

Ctrl+Alt+S を押して設定を開き、ツール | File Watchers を選択します。必要なファイルウォッチャー (この例では SCSS) を選択し、ツールバーのをクリックします。ファイルウォッチャーの編集ダイアログで、拡張オプション領域を展開し、編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにします。

デフォルトでは、File Watcher は、そのスコープ内のファイルが PyCharm の外部から編集された場合でも起動します。この動作を無効にして、内部で編集するときにのみファイルをトランスパイルするには、外部の変更でウォッチャーをトリガーするチェックボックスをオフにします。

Trigger the File Watcher on external changes is off

スコープを変更する

デフォルトでは、PyCharm は、プロジェクト全体で .scss 拡張子を持つすべてのファイルの変更を監視します。これは、この例では機能します。ただし、処理するスコープを変更できます。たとえば、コミットされていない変更のみを変更できます。大スコープなプロジェクトでは、これにより時間を節約できます。

Ctrl+Alt+S を押して設定を開き、ツール | File Watchers を選択します。必要なファイルウォッチャー (この例では SCSS) を選択し、ツールバーのをクリックします。ファイルウォッチャーの編集ダイアログで、リストから該当するスコープを選択します。詳細については、スコープとファイルの色を参照してください。

カスタム出力場所

デフォルトでは、生成された .css ファイルと .css.map ファイルは、元のファイルがあるフォルダーに保存され、プロジェクトツールウィンドウにその子として表示されます。このデフォルトの動作を変更して、生成されたすべての .css ファイルと .css.map ファイルを別のフォルダーに保存できます。

簡単なケースから始めましょう。プロジェクトルートに custom_output.scss ファイルがあるとします。

custom_output.scss を編集してみましょう。たとえば、6 行目の fill-opacity: abs(50); を fill-opacity: abs(60); に置き換えます。デフォルトの FileWatcher 構成では、生成されたファイル custom_output.css および custom_output.css.map はプロジェクトルートに保存され、custom_output.scss の子として表示されます。

Default settings: the output is stored in the project root

すべての出力を別のフォルダー（たとえば、css）に保存すると便利です。css フォルダーを出力場所として使用してカスタム SCSS_custom_output ファイルウォッチャーを作成しましょう。

Ctrl+Alt+S を押して設定を開き、ツール | File Watchers を選択します。次に、上記のように SCSS File Watcher を作成します。

デフォルト設定を次のように更新します。

引数フィールドに次のように入力します。
$FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css
リフレッシュする出力パスフィールドに次のように入力します。
$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map

New File Watcher with custom output path

新しいファイルウォッチャーを保存し、有効になっていることを確認します。

New File Watcher with custom output path saved and enabled

ここで、たとえば custom_output.scss を編集する場合、6 行目の fill-opacity: abs(50); を fill-opacity: abs(60); に置き換えると、PyCharm は css フォルダーを作成し、生成された custom_output.css ファイルと custom_output.css.map ファイルをそのフォルダーに保存します。

Custom settings: the output is stored in a separate folder

カスタム出力場所: 元のフォルダー構造を保持する

ここで、.scss ファイルがフォルダー構造に格納されている例を考えてみましょう。例:

デフォルトの File Watcher では、生成されたファイルは元の .scss ファイルの隣に保存されます。上記のようにカスタム File Watcher を使用すると、生成されたすべてのファイルが同じ css フォルダーに保存されます。

Custom output: the generated files are stored in a separate folder in a plain structure

PyCharm でフォルダー構造を保持するには、別のカスタム File Watcher を作成しましょう。

Ctrl+Alt+S を押して設定を開き、ツール | File Watchers を選択します。次に、上記のように SCSS File Watcher を作成します。

デフォルト設定を次のように更新します。

引数フィールドに次のように入力します。
$FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css
リフレッシュする出力パスフィールドに次のように入力します。
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map

Custom output with folder structure: File Watcher updated

新しいファイルウォッチャーを保存し、有効になっていることを確認します。

Custom output with folder structure: File Watcher saved and enabled

ここで、custom_output_body.scss、custom_output_header.scss、custom_output_footer.scss を編集すると、PyCharm は、styles_structured の構造を保持するサブフォルダーの構造を持つ css フォルダーを作成します。

Custom settings: the output is stored in a separate folder, the structure preserved

サンプル: Less を CSS にコンパイルする

プロジェクトが次のように構成されているとします。

Compiling Less into CSS: project structure

以下の例は、プロジェクトを手動または自動で保存するときに my-styles.less が CSS にコンパイルされる方法と、my-styles.less への変更が生成された CSS ファイルにどのように反映されるかを示しています。

Less タイプのファイルウォッチャーを作成します。設定ダイアログ (Ctrl+Alt+S) を開き、ツール | File Watchers に移動し、ツールバーのをクリックして、リストから Less を選択します。
または、エディタータブの上部にある File Watcher が LESS を CSS にコンパイルできるようにしますか？ペインで、.less ファイルを含むはいをクリックします。
開いた新しいファイルウォッチャーダイアログでは、すべての必須フィールドがすでに入力されています。
実際、これらの設定は、コンパイラーを正常に実行するのに十分です。
my-styles.less を変更してみましょう。たとえば、行 1 の @color の値を変更します。これにより、File Watcher がトリガーされます。その結果、2 つのファイルが生成され、my-styles.less にネストされて表示されます。
- コンパイルされた CSS コードを含む my-styles.css
- デバッグセッション中にアプリをステップスルーできるソースマップを備えた my-styles.css.map。

FileWatcher をトリガーするアクションを変更する

Ctrl+Alt+S を押して設定を開き、ツール | File Watchers を選択します。必要なファイルウォッチャー (この例では Less) を選択し、ツールバーのをクリックします。ファイルウォッチャーの編集ダイアログで、拡張オプション領域を展開し、編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにします。

スコープを変更する

Ctrl+Alt+S を押して設定を開き、ツール | File Watchers を選択します。必要なファイルウォッチャー (この例では Less) を選択し、ツールバーのをクリックします。ファイルウォッチャーの編集ダイアログで、リストから該当するスコープを選択します。詳細については、スコープとファイルの色を参照してください。

カスタム出力場所

簡単なケースから始めましょう。プロジェクトルートに custom_output.less ファイルがあるとします。

たとえば、custom_output.less を編集して、1 行目の @color の値を変更します。デフォルトの File Watcher 構成では、生成されたファイル custom_output.css および custom_output.css.map はプロジェクトルートに保存され、custom_output.less の子として表示されます。

すべての出力を別のフォルダー（たとえば、css）に保存すると便利です。css フォルダーを出力場所として使用してカスタム Less_custom_output ファイルウォッチャーを作成しましょう。

Ctrl+Alt+S を押して設定を開き、ツール | File Watchers を選択します。次に、上記のように Less File Watcher を作成します。

デフォルト設定を次のように更新します。

引数フィールドに次のように入力します。
$FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-map
リフレッシュする出力パスフィールドに次のように入力します。
$ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map

新しいファイルウォッチャーを保存し、有効になっていることを確認します。

ここで、たとえば custom_output.less を編集して 1 行目の @color の値を変更すると、PyCharm は css フォルダーを作成し、生成された custom_output.css および custom_output.css.map ファイルをそこに格納します。

カスタム出力場所: 元のフォルダー構造を保持する

ここで、.less ファイルがフォルダー構造に格納されている例を考えてみましょう。例:

デフォルトの File Watcher では、生成されたファイルは元の .less ファイルの隣に保存されます。上記のようにカスタム File Watcher を使用すると、生成されたすべてのファイルが同じ css フォルダーに保存されます。

PyCharm でフォルダー構造を保持するには、別のカスタム File Watcher を作成しましょう。

Ctrl+Alt+S を押して設定を開き、ツール | File Watchers を選択します。次に、上記のように Less File Watcher を作成します。

デフォルト設定を次のように更新します。

引数フィールドに次のように入力します。
$FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css --source-map
リフレッシュする出力パスフィールドに次のように入力します。
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map

新しいファイルウォッチャーを保存し、有効になっていることを確認します。

ここで、custom_output_body.less、custom_output_header.less、custom_output_footer.less を編集すると、PyCharm は、styles_structured の構造を保持するサブフォルダーの構造を持つ css フォルダーを作成します。