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