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