Sass、SCSS、Less、PostCSS

GoLand は、 Sass、 Less、 SCSS コードを CSS に変換するコンパイラーと連携します。 GoLand でコンパイラーを利用するには、関連する事前定義済みテンプレートに基づいてファイルウォッチャーとして構成する必要があります。

SASS および LESS プラグインをインストールする

GoLand で SASS および LESS を使用するには、JetBrains 製の SASS および LESS プラグインをインストールしてください。

設定 | プラグインを開きます。
マーケットプレースをクリックしてください。
検索フィールドに Sass または Less と入力し、 Enter を押します。
プラグインをインストールするには、インストールをクリックし、GoLand を再起動してください。

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 を構成する必要があります。

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

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

編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。
編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスがオフの場合、保存時（ファイル | すべて保存、 Ctrl+S ）または GoLand からフォーカスを移動したとき（フレームの非アクティブ化時）にファイルウォッチャーが開始されます。

詳しくは File Watchers をご覧ください。

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

File Watcher を作成する

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

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

プロジェクトが次のような構造であると仮定します：

ご覧のとおり、 _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 が起動し、トランスパイラーを起動します。

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

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

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

スコープを変更する

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

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

カスタム出力場所

デフォルトでは、生成された .css および .css.map ファイルは元のファイルと同じフォルダーに保存され、プロジェクトツールウィンドウ (Alt+1) では元のファイルの子ファイルとして表示されます。このデフォルトの動作を変更して、生成されたすべての .css および .css.map ファイルを別のフォルダーに保存することもできます。

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

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

すべての出力を別のフォルダー（たとえば、 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

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

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

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

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

デフォルトの File Watcher では、生成されたファイルは元の .scss ファイルの隣に保存されます。

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

カスタム出力: 生成されたファイルは、プレーンな構造の別のフォルダーに保存されます

GoLand でフォルダー構造を保持するには、別のカスタムファイルウォッチャーを作成しましょう。

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_body.scss 、 custom_output_header.scss 、または custom_output_footer.scss を編集すると、GoLand は styles_structured の構造を保持したサブフォルダー構成で css フォルダーを作成します。

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

プロジェクトが次のような構造であると仮定します：

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

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