【SCSS入門】WordPressプラグイン『WP-SCSS』で誰でも簡単!【コンパイル方法】

SCSSは便利。SCSSは絶対やった方がいい。

ウェブ制作の業務効率化を調べると、そればかり出てきます。

しかしCSSをコンパイル・・・とは・・・? その方法だけ調べてもよくわからない人が多数だと思います。

もしあなたがワードプレスを使っているなら、もうコンパイルの方法云々は一度忘れて、すぐにSCSSを導入することができます!!

以下、手順です。

『WP-SCSS』をインストール

ワードプレスのプラグイン新規追加画面から、『WP-SCSS』を検索して有効化してください。

Scss Location、Scss Locationの設定

『WP-SCSS』の設定画面へ行くと、上の方に「Scss Location」、「Scss Location」の項目があるかと思います。

「Scss Location」にはScssファイルのある場所を指定。
「Css Location」にはコンパイルしたCSSファイルを置く場所を指定してください。

ドメイン以下のパス指定で大丈夫ですので、例えば(テーマのルートディレクトリ)/library/scss/であれば、「/library/scss/」になります。

もしScss用のディレクトリを用意していなければ、新規で作成しておいてください。

設定画面の「Compiling Mode」を「compressed」にして、設定完了です。

最後に「変更を保存」をしましょう。

自動的にScssフォルダのファイルをコンパイル!

すると自動的に指定したScssフォルダの中にあるScssファイルをコンパイルして、指定したcssフォルダに新規cssファイルを作成してくれます。

後は、htmlのheadからコンパイルされたcssファイルを読み込めばOK。

cssの編集はScssファイルを書き換えれば、プラグインが勝手にcssも更新してくれます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です