プログラミング

WordPressにSCSSを導入できるプラグイン「WP-SCSS」

今回はWordPressのスタイルシートまわりについて。

WordPressでスタイルを弄るときは基本的にはスタイルシート(CSS)を修正しますよね。

maechan
maechan
でもクラスの階層が深くなると作業が大変なのよね・・・

そこで便利なのが「SCSS」。

SCSS」とはCSSを効率的に書くことができるCSSプリプロセッサ(メタ言語)のこと。

これは非常に便利でこいつを使うと作業効率がグンっと少なくなるスグレモノです。

WordPressに導入できるのかなあと探したところ「WP-SCSS」という素敵なプラグインを発見。

maechan
maechan
ヤッホい

早速導入してみました。

WP-SCSS のインストール

インストール方法は、WordPress管理画面のプラグインのインストールページから「WP-SCSS」と検索すればOKです。

WP-SCSS の設定

「WP-SCSS」のインストールが終わったら、お次は設定です。

設定で意識することは「Configure Paths」項目の「Scss Location」と「CSS Location」の2つ。

「Scss Location」は SCSS ファイルを設置する場所で、「CSS Location」はその SCSS ファイルからレンダリングされた CSS ファイルが設置される場所です。

私の場合は「assets/css」と「assets/scss」を作り、それぞれ管理するようにしています。

基本的に「Scss Location」で指定したディレクトリ内のファイルを弄り、「CSS Location」で指定したディレクトリ内のファイルは手を付けないようにします。

WP-SCSS の設定の際に、

「Wp-Scss: One or more specified directories does not exist. Please create the directories or update your settings.」

というエラーが出た場合は、「Scss Location」か「CSS Location」の設定に不備があります。

設定を再度確認してみてください。

おわり

SCSS簡単ラクチン。

記事内の写真出典元

Photo by Maik Jonietz on Unsplash

ABOUT ME
maechan
ベンチャー、フリーランス、スタートアップを経験。 開発業務、人事業務に従事していました。 現在は農業系スタートアップ企業でエンジニアとして働いています。 リモートワークをしているノマドサラリーマンです。茶道とワークアウトが趣味です。