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

\ 知らないうちに損してる? /

Amazonポイント最大2.5%還元キャンペーン

駿河屋スタッフ募集中

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も更新してくれます。

コメントを残す

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

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業(イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲)をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は4万冊。