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