まえちゃんろぐ

日々の生活の中での気付き、学んだこと、体験したことをアウトプットするブログ(雑記多めです)| プログラミング 本 ワークアウト 茶道

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

time 2018/06/19

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

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

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

seiya-image
maechan

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

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

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

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

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

seiya-image
maechan

ヤッホい

早速導入してみました。

sponsored link

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簡単ラクチン。

販売中チケット

プログラミング、Webサービスの作り方教えます

自分のスキルを販売しております。お困りの方はご遠慮なくご連絡頂ければと思います。

down

コメントする




スポンサードリンク

書いてる人

maechan

maechan

ベンチャー企業、フリーランス、スタートアップを経験。開発業務、人事業務に従事していました。現在は農業系スタートアップ企業でエンジニアとして働いています。リモートワークをしているノマドサラリーマンです。詳しいプロフィールはこちら。 [詳細]

販売中チケット

プログラミング、Webサービスの作り方教えます 一人で悩まず!お気軽にご相談ください!

その他のチケットはこちら

Instagram