Sass、SCSS、Less、PostCSS
CLion は、 Sass、 Less、 SCSS コードを CSS に変換するコンパイラーと統合します。 CLion でコンパイラーを使用するには、関連する事前定義済みテンプレートに基づいて File Watcher として構成する必要があります。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの Marketplace タブに File Watchers プラグインをインストールして有効にします。
設定 | プラグイン ページ、タブ インストール済み で、 File Watchers および Less または Sass の必要なプラグインが有効化されていることを確認してください。 詳細については、 プラグインの管理を参照してください。
Sass/SCSS のインストール
コマンドライン シェルまたは組み込みの ターミナルエミュレータ （Alt+F12 ）で、次を入力します：
npm install -g sassSass オフィシャル Web サイト(英語)の詳細を参照してください。
Less のインストール
コマンドライン シェルまたは組み込みの ターミナルエミュレータ （Alt+F12 ）で、次を入力します：
npm install --global lessLess オフィシャル Web サイト(英語)の詳細を参照してください。
コードを CSS にコンパイルする
コードを自動的にコンパイルするには、コンパイラーをインストールし、ファイルへの変更を追跡してコンパイラーを実行する Sass、Less、SCSS File Watcher を構成する必要があります。
ファイルを開くと、CLion は現在のプロジェクトで適用可能な File Watcher が利用できるかどうかを確認します。 そのような File Watcher が構成されているが無効の場合、CLion は構成済みの File Watcher を通知し、有効化を提案するポップアップを表示します。
現在のプロジェクトで該当する File Watcher が構成され有効化されている場合、CLion は New Watcher dialogで指定されたイベントが発生すると自動的にコンパイラーを起動します。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスがオフの場合、保存時（、 Ctrl+S ）または CLion からフォーカスを移動したとき（フレームの非アクティブ化時）に File Watcher が起動します。
詳細については、 File Watchers を参照してください。
CLion は生成した出力で別ファイルを作成します。 ファイルの名前は、ソース Sass、 Less、 SCSS ファイルの名前と拡張子 .css です。 生成されたファイルの場所は、 リフレッシュする出力パス フィールドの New Watcher ダイアログで定義されています。 しかし、 プロジェクトツリー では、それらは今ノードとして表示されているソースファイルの下に表示されます。
File Watcher を作成する
設定 ダイアログ（Ctrl+Alt+S ）で、 ツール の File Watchers をクリックします。 開く File Watchers ページには、構成済みのファイルウォッチャーのリストが表示されます。
をクリックするか、 Alt+Insert を押します。 使用するツールに応じて、リストから Less、 Sass、 SCSS の事前定義テンプレートを選択します。プログラム フィールドで、選択した事前定義テンプレートに応じてコンパイラーアーカイブへのパスを指定します。
Less 用の lessc 。
Sass/SCSS 用の sass 。
npm で標準インストールプロシージャを実行した場合、CLion は必要なファイルを自動的に特定し、フィールドに入力します。 それ以外の場合は、パスを手動で入力するか、
をクリックして、表示されるダイアログでファイルの場所を選択します。File Watchers に記載された手順に従って進めます。
サンプル: SCSS を CSS にコンパイルする
プロジェクトが次のような構造の場合：
ご覧のとおり、 _grid.scss は Page.scss にインポートされます。 以下の例は、プロジェクトを手動または自動で保存するときに Page.scss が CSS にコンパイルされる方法と、 _grid.scss への変更が生成された CSS ファイルにどのように反映されるかを示しています。
SCSS タイプの File Watcher を作成します： 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動してツールバーの
をクリックし、リストから SCSS を選択します。
開いた 新しいファイルウォッチャー ダイアログでは、必須フィールドはすべてすでに入力されています。
実際、これらの設定でコンパイラーは正常に実行できます。
たとえば grid.scss を変更し、31 行目の
margin-left: 0;をmargin-left: 12px;に置き換えてみましょう。 これにより File Watcher がトリガーされ、コンパイラーが Page.scss を処理します。 その結果、ファイルが 2 つ生成され、 Page.scss の下にネスト表示されます：コンパイルされた CSS コードを含む Page.css
デバッグセッション中にアプリをステップスルーできるソースマップを備えた Page.css.map 。
デフォルト設定でもコンパイラーの実行は可能ですが、File ウォッチャーの動作をカスタマイズする方法を確認するため、これらの設定を詳しく見てみましょう。
FileWatcher をトリガーするアクションを変更する
プロジェクトが手動（ または Ctrl+S ）または自動で保存されるとすぐに、File Watcher が起動し、トランスパイラーを起動します。
通常、CLion からフォーカスを移動したとき (フレーム非アクティブ化時) にコードは自動保存されます。 File Watchers では、File Watcher のスコープからファイルを編集するときにも自動保存が実行されます。 その結果、入力中は常にトランスパイラが実行され、パフォーマンスの問題が発生する可能性があります。 この問題を解決するには、編集したファイルの自動保存を抑制します。
Ctrl+Alt+S を押して設定を開き、 を選択します。 必要な File Watcher（この例では SCSS ）を選択し、ツールバーの 
をクリックします。 ファイルウォッチャーを編集 ダイアログで、 拡張オプション 領域を展開し、 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにします。
デフォルトでは、File Watcher は、そのスコープ内のファイルが CLion の外部で編集された場合でも起動します。 この動作を無効にして、内部で編集するときにのみファイルをトランスパイルするには、 外部の変更でウォッチャーをトリガーする チェックボックスをオフにします。
スコープを変更する
デフォルトでは、CLion はプロジェクト全体で .scss 拡張機能を持つすべてのファイルの変更を監視します。 これは本例に適しています。 ただし、スコープを変更して、たとえばコミットされていない変更だけを処理することも可能です。 大規模プロジェクトでは、これにより時間を節約できます。
Ctrl+Alt+S を押して設定を開き、 を選択します。 必要な 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 を押して設定を開き、 を選択します。 そして、 上記の手順に従ってSCSS File Watcher を作成します。
デフォルト設定を次のように更新します：
引数 フィールドに、次の内容を入力します：
$FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.cssリフレッシュする出力パス フィールドに、次の内容を入力します：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
新しい File ウォッチャーを保存し、有効化されていることを確認します。
ここでたとえば custom_output.scss を編集し、6 行目の fill-opacity: abs(50); を fill-opacity: abs(60); に変更すると、CLion は css フォルダーを作成し、生成した custom_output.css と custom_output.css.map ファイルをそこに保存します。
カスタム出力場所: 元のフォルダー構造を保持する
次に、 .scss ファイルがフォルダー構造に格納されている例を考えてみましょう。例えば：
デフォルトの File Watcher では、生成されたファイルは元の .scss ファイルの隣に保存されます。
上記のようにカスタム File Watcher を使用すると、生成されたすべてのファイルが同じ css フォルダーに保存されます。
CLion でフォルダー構造を保持するには、別のカスタム File Watcher を作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。 そして、 上記の手順に従ってSCSS File Watcher を作成します。
デフォルト設定を次のように更新します：
引数 フィールドに、次の内容を入力します：
$FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.cssリフレッシュする出力パス フィールドに、次の内容を入力します：
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
新しい File ウォッチャーを保存し、有効化されていることを確認します。
ここで custom_output_body.scss 、 custom_output_header.scss 、 custom_output_footer.scss を編集すると、CLion は styles_structured の構造を保持するサブフォルダーを持つ css フォルダーを作成します。
サンプル: Less を CSS にコンパイルする
プロジェクトが次のように構造されているとします：
以下の例は、プロジェクトを手動または自動で保存したときに my-styles.less が CSS にコンパイルされ、 my-styles.less の変更が生成された CSS ファイルにどのように反映されるかを示しています。
Less タイプの File Watcher を作成します： 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動してツールバーの
をクリックし、リストから Less を選択します。
または、エディタータブの上部にある ファイルウォッチャーを有効化して LESS を CSS にコンパイルしますか？ ペインで、 .less ファイルを含む はい をクリックします。
開いた 新しいファイルウォッチャー ダイアログでは、必須フィールドはすべてすでに入力されています。
実際、これらの設定でコンパイラーは正常に実行できます。
たとえば my-styles.less を編集して、1 行目の
@色の値を変更します。 これにより File Watcher がトリガーされます。 その結果、ファイルが 2 つ生成され、 my-styles.less の下にネスト表示されます：コンパイルされた CSS コードを含む my-styles.css
デバッグセッション中にアプリをステップスルーできるソースマップを備えた my-styles.css.map 。
デフォルト設定でもコンパイラーの実行は可能ですが、File ウォッチャーの動作をカスタマイズする方法を確認するため、これらの設定を詳しく見てみましょう。
FileWatcher をトリガーするアクションを変更する
プロジェクトが手動（ または Ctrl+S ）または自動で保存されるとすぐに、File Watcher が起動し、トランスパイラーを起動します。
通常、CLion からフォーカスを移動したとき (フレーム非アクティブ化時) にコードは自動保存されます。 File Watchers では、File Watcher のスコープからファイルを編集するときにも自動保存が実行されます。 その結果、入力中は常にトランスパイラが実行され、パフォーマンスの問題が発生する可能性があります。 この問題を解決するには、編集したファイルの自動保存を抑制します。
Ctrl+Alt+S を押して設定を開き、 を選択します。 必要な File Watcher（この例では Less ）を選択し、ツールバーの をクリックします。 ファイルウォッチャーを編集 ダイアログで、 拡張オプション 領域を展開し、 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにします。
スコープを変更する
デフォルトでは、CLion はプロジェクト全体で .scss 拡張機能を持つすべてのファイルの変更を監視します。 これは本例に適しています。 ただし、スコープを変更して、たとえばコミットされていない変更だけを処理することも可能です。 大規模プロジェクトでは、これにより時間を節約できます。
Ctrl+Alt+S を押して設定を開き、 を選択します。 必要な File Watcher（この例では Less ）を選択し、ツールバーの をクリックします。 ファイルウォッチャーを編集 ダイアログで、リストから該当するスコープを選択します。 詳しくは スコープとファイルの色 を参照してください。
カスタム出力場所
デフォルトでは、生成された .css および .css.map ファイルは元のファイルと同じフォルダーに保存され、 プロジェクト ツールウィンドウ (Alt+1) では元のファイルの子ファイルとして表示されます。 このデフォルトの動作を変更して、生成されたすべての .css および .css.map ファイルを別のフォルダーに保存することもできます。
簡単なケースから始めましょう。 プロジェクトルートに custom_output.less ファイルがあるとします。
たとえば、 custom_output.less を編集して、1 行目の @色 の値を変更します。 デフォルトの File Watcher 構成では、生成されたファイル custom_output.css および custom_output.css.map はプロジェクトルートに保存され、 custom_output.less の子として表示されます。
すべての出力を別のフォルダー（たとえば、 css ）に保存すると便利です。 css フォルダーを出力場所として使用してカスタム Less_custom_output ファイルウォッチャーを作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。 そして、 上記の手順に従ってLess と File Watcher を作成します。
デフォルト設定を次のように更新します：
引数 フィールドに、次の内容を入力します：
$FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-mapリフレッシュする出力パス フィールドに、次の内容を入力します：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
新しい File ウォッチャーを保存し、有効化されていることを確認します。
ここで、たとえば custom_output.less を編集して 1 行目の @色 の値を変更すると、CLion は css フォルダーを作成し、生成された custom_output.css および custom_output.css.map ファイルをそこに保存します。
カスタム出力場所: 元のフォルダー構造を保持する
次に、 .less ファイルがフォルダー構造に格納されている例を考えてみましょう。例えば：
デフォルトの File Watcher では、生成されたファイルは元の .less ファイルの隣に保存されます。
上記のようにカスタム File Watcher を使用すると、生成されたすべてのファイルが同じ css フォルダーに保存されます。
CLion でフォルダー構造を保持するには、別のカスタム File Watcher を作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。 そして、 上記の手順に従ってLess と File Watcher を作成します。
デフォルト設定を次のように更新します：
引数 フィールドに、次の内容を入力します：
$FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css --source-mapリフレッシュする出力パス フィールドに、次の内容を入力します：
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
新しい File ウォッチャーを保存し、有効化されていることを確認します。
ここで custom_output_body.less 、 custom_output_header.less 、 custom_output_footer.less を編集すると、CLion は styles_structured の構造を保持するサブフォルダーを持つ css フォルダーを作成します。
構文ハイライトの構成
Less/Sass/SCSS/PostCSS 対応の構文ハイライトは、お好みに合わせて設定できます。
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
カラースキームを選択し、デフォルトから継承されたハイライト設定を受け入れるか、 色とフォント に記載されている手順に従ってカスタマイズしてください。
Sass および SCSS セレクター一式
CLion は Sass および SCSS セレクターの補完を提供します。 ネストされたセレクターや アンパサンド (&) で作成されたセレクターも含まれます。
クラウド補完と行全体補完
CLion は Sass/SCSS、Less、PostCSS コードで クラウド補完と Full Line 補完を提供します。
行全体コード補完機能は、ローカルで実行されるディープラーニングモデルを使用して、コード行全体を提案します。 CLion ですぐに利用でき、追加のライセンスは必要ありません。
行全体コード補完を有効にする
Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | インライン補完 を選択してください。
ローカル Full Line 補完候補を有効化 チェックボックスを選択し、 CSS のような チェックボックスが選択されていることを確認します。
AI Assistant 搭載のクラウド補完は、プロジェクトのコンテキストに基づいて、単一行・コードブロック・関数全体さえもリアルタイムで自動補完できます。
Cloud Completion は、コンテキストを考慮して構文的に妥当な解決策を提案し、さまざまな コードインスペクション を事前に実行してエラーとなる候補を除外します。
クラウド補完を有効にする
Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | インライン補完 を選択してください。
クラウド補完候補を有効化 チェックボックスを選択し、 HTML チェックボックスが選択されていることを確認します。
検索とナビゲーション
ドキュメントの検索
プロパティや疑似要素については、CLion で対応する MDN 記事 の概要を表示できます。 この概要は ドキュメント ポップアップに表示され、プロパティとその値の簡単な説明と、対応する Web プラットフォームのベースラインステータス(英語)が表示されます。
セレクターの場合、CLion はその 詳細度も表示します。
プロパティのドキュメントを表示
プロパティにキャレットを置き、 Ctrl+Q を押すか、メインメニューから を選択します。
プロパティにマウスオーバーすると、CLion がすぐに ドキュメント ポップアップでそのリファレンスを表示します。
この動作をオフにすることも、ポップアップの表示を速くまたは遅くするように設定することもできます。以下の ドキュメントポップ上への動作の構成を参照してください。
ドキュメントポップアップの動作を設定する
コードシンボル上にカーソルを載せたときに自動でドキュメントを表示しないようにするには、ポップアップ内で
をクリックし、 マウス移動時に表示する オプションを無効化する。ドキュメント ポップアップを速くまたは遅く表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動してから、 ドキュメントのポップアップを表示する チェックボックスを選択して遅延時間を指定します。
ブラウザーで MDN ドキュメントを開く
ドキュメント ポップアップ Ctrl+Q で、下部のリンクをクリックします。
Shift+F1 を押すか、メインメニューから を選択します。
フォーマット
CLion の組み込みフォーマッターを使えば、スタイルシートコードの断片だけでなく、ファイルやフォルダー全体も、言語固有のコードスタイル要件に合わせて整形できます。 また、フォーマッタはコードを生成またはリファクタリングする際に自動的に起動します。
スタイルシート言語のフォーマットを構成するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して、タブとインデント、スペース、中括弧と中括弧、ハードマージンとソフトマージンなどの言語固有の設定を構成します。
設定を変更すると、 プレビュー 領域に変更が書式にどのように影響するかが表示されます。
CSS、SCSS、Less コンテキストでは、CLion はデフォルトで、
importステートメントおよび URL で生成する文字列リテラルに double 引用符を使用します。 単一引用符を使用するには、「その他 」タブを開き、「引用符 」リストから「単一 」を選択します。再フォーマット後に選択したスタイルをファイル全体に適用するには、リストの フォーマット時に強制する チェックボックスを選択します。
コードフラグメントを再フォーマットするには、エディターでそれを選択して Ctrl+Alt+L を押します。
ファイルまたはフォルダーを再フォーマットするには、 プロジェクト ツールウィンドウ（Alt+1 ）で対象を選択し、 Ctrl+Alt+L を押します。 詳細については、 コードの再フォーマットと再配置を参照してください。
あるいは、 Prettier (Ctrl+Alt+Shift+P) を使用することもできます。
リファクタリング
CLion では、スタイルシートの式を変数へ変換し、 .css ファイルで var(--var-name) 構文や、 .scss ・ .sass ファイルで $ 構文により変数を導入できます。
変数の導入
エディターで、変数に変換する式にキャレットを置き、 Ctrl+Alt+V を押すか、コンテキストメニューまたはメインメニューから を選択します。
選択した式が複数出現する場合は、 複数の出現箇所が見つかりました リストから この出現箇所だけを置換 または 出現箇所をすべて置換 を選択してください。
.scss および .sass の場合、変数の グローバルスコープまたは ローカルスコープを選択します。
赤い枠の付いたフィールドで、提案された変数名をそのまま使用するか、カスタム名を指定します。 準備ができたら Enter を押してください。
CLion を使うと、CSS、SCSS、Sass、Less ファイルの既存宣言から新しいルールセットを作成したり、リファクタリングやインテンションアクションでルールセット全体をファイル間で移動することも可能です。
ルールセットを導入する
導入する宣言を選択します。 宣言が 1 つだけ必要な場合は、宣言の中にキャレットを置くだけです。
Alt+Enter を押し、リストから ルールセットを導入 を選択します。
CLion は同じセレクターで新規ルールセットを作成し、選択。宣言をその中へ移動します。 選択範囲にコメント、ネストしたセレクタなどが含まれている場合、それらも新しいルールセットに移動されます。
ルールセットを他のファイルに移動する
ルールセット内の移動する任意の場所にキャレットを置き、 F6 を押します。
表示されたダイアログで、ルールセットを移動するファイルを指定します。 指定したファイルが存在しない場合、CLion は新規作成を提案します。
デフォルトでは、CLion はルールセットが移動されたファイルを自動的に開きます。 この動作を変更するには、 エディターで開く チェックボックスをオフにします。
コピー、 移動、 名前変更などの一般的なリファクタリングも利用できます。
ブラウザーとの互換性を確認する
ドキュメントポップアップで検索するだけでなく、その場で特定のブラウザーとの互換性についてスタイルシートのプロパティを確認できます。 このインスペクションは MDN ブラウザー互換性データ(英語)に基づいており、対象のブラウザーのいずれかでプロパティがサポートされていない場合は常に警告を表示します。
互換性チェックをオンにする
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
CSS ノードを展開して プロパティは選択されたブラウザーと互換性がありません を選択します。 オプション エリアで、ターゲットにするブラウザーとその最小バージョンを選択します。
オプション 領域で、プロパティの可用性を確認するブラウザーを選択します。 選択したブラウザーのターゲットバージョンを指定します。
色の管理
CLion は CSS カラー管理をサポートし、 コード補完・ クイックドキュメント検索・ カラープレビューなどが利用可能です。 絶対色、相対色、混合色についてコーディング支援が提供されます。
色を指定する
色の変更
ガター内のカラーアイコンをクリックし、ポップアップで目的の色を選択します。
または、キャレットを色のプロパティに置き、 Alt+Enter を押して、リストから 色の変更 を選択し、ポップアップで目的の色を選択します。
カラープレビューを切り替える
CLion は絶対色、相対色、混合色のプレビューを表示します。
デフォルトでは、CLion はカラープレビューをガターアイコンとして表示します。 背景にカラープレビューを表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して CSS 色プレビューを背景として表示する チェックボックスをオンにします。
カラープレビューガターアイコンを復元するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動して、 共通 領域の 色プレビュー チェックボックスを選択します。
タグに適用されたスタイルを表示する
HTML および XHTML ファイルでは、CLion で任意のタグに適用されたすべてのスタイルを確認できます。
タグのコンテキストメニューから を選択します。
CLion は CSS スタイル ツールウィンドウを開き、左ペインでタグのスタイルを、右ペインでそれらの定義を表示します。 各タグごとに、CLion は別のタブを開きます。
ツールウィンドウから、ソースコード中のタグやプロパティ定義へナビゲーションできます。
タグに移動するには、左側のペインのツールバーの
をクリックします。プロパティの定義に移動するには、左側のペインでそれを選択し、右側のペインのツールバーの
をクリックします。