ワードプレスでSassを使ってみる

Sass(SCSS)とは?

現在ワードプレスの公式テーマ「Lightning」を子テーマでカスタマイズしています。
サイトの見た目を変更したいときはCSSファイルに書き加えるのですが、Sass(SCSS)を使えた方が何かと便利なのでワードプレスをSassで書けるようにしてみます。せっかくSassのテキストを買って勉強したので。

SassはCSSの発展形として作られた言語で、{}を用いないSass形式と元のCSSに近い{}でくくるSCSS形式の2つがあります。

Sassの特徴としては、

・入れ子構想で書ける
・変数を書いて値を使いまわしできる
・サイズなどの値の演算可能
・繰り返しやifで条件分け可能

などでCSSに比べてコード数を減らすことが可能になります。

プラグイン「WP-SCSS」でコンパイルする

しかしテキストエディタでSass(SCSS)ファイルを作成してワードプレスのCSSファイルがある場所においても、そのまま読み込んではくれません。
Sass(SCSS)ファイルをCSSファイルにコンパイル(変換)する必要があります。

テキストエディタにコンパイルするための機能をインストールする方法もあるのですが、ワードプレスのプラグイン「WP-SCSS」というものがあるのを知りました。

これはSCSSファイルを自動的にCSSにコンパイルしてくれるプラグインです。

プラグインをインストールして設定をいくつかするだけで自動的に変換してくれます。

「WP-SCSS」の設定の仕方

まず、サイトのダッシュボードから「新規追加」→「WP-SCSS」と検索してプラグインをインストールして有効化します。

次に、ダッシュボードの「管理画面」から「WP-SCSS」をクリックします。
以下が設定画面となります。

「Scss Location」にSCSSファイルがある場所を指定し、「CSS Location」にコンパイル後のCSSファイルを置く場所を指定します。
「Compiling Mode」はコンパイルの方式を選択するのですが、コードを詰めて出力して容量が軽くなる「compressed」にしています。

「変更を保存」をクリックして終わりです。

後はSCSSを書くだけです。私は「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」をセール中に買って勉強しました。

コメントを残す

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