Sassを書くときは長らくCompassを使ってきて、2016年にメンテナンス終了宣言がなされたのは知ってたんだけど、そろそろ@mixinとか依存した書き方を続けていくのも潮時かなと思ったので、この度gulpに乗り換えた。

Node.jsインストールしてgulp-sass使って・・・という記事は既にたくさん存在しているけど、WordPressのディレクトリ構造に合わせて構築する記事がなかったのでまとめてみた。

こんな人向け

• WordPressでサイトを作っている
• WordPressでもSCSSでCSSを書きたい

前提

• Macユーザーでターミナルが使える

手順

1. Node.jsのインストール

   https://nodejs.org/ja/download/

2. WordPressのテンプレートフォルダに移動

   $ cd ~/public/wp-content/themes/theme_name(適当に置き換えて)

3. 初期化してpackage.jsonファイルを生成

   $ npm init -y

4. gulpでSassをコンパイルするためのモジュールをインストール

   $ npm install -D gulp gulp-sass
   

5. gulpfile.jsファイルの作成

   /themes/theme_name直下でgulpfile.jsを作成し、下記のコンパイルと自動化の設定を記述する。

   gulpfile.js

   const gulp = require("gulp");
   const sass = require("gulp-sass");
   gulp.task("default", function() {
     return gulp.watch("scss/*.scss", function() {
       return (
         gulp
           .src("scss/style.scss")
           .pipe(
             sass({
               outputStyle: "expanded"
             })
               .on("error", sass.logError)
           )
           .pipe(gulp.dest("."))
       );
     });
   });
   

6. /themes/theme_name直下に、SCSSを格納しておくフォルダ /scssを作る

7. /scss直下にstyle.scssを作成し、何かスタイルを書いてみる ※もともと/themes/theme_names配下にあるstyle.cssは避難させておいてね

8. gulpを起動してSCSSからCSSにコンパイル

   $ npx gulp

   ※npm(Node.jsをダウンロードすると付属してくるパッケージ)のバージョン5.2.0以降であれば、npxというコマンドが使える

   コマンドを実行した後、/themes/theme_name直下にstyle.cssが自動で書き出されていればOK。

   次回以降、SCSSをコーディングする前に毎回$ npx gulpをすると、.scssファイルの変更を監視してくれて、変更があった場合に自動でstyle.cssも更新されるようになる。

おわりに

上記の環境をローカルで構築していて、例えばWordmoveを使っている人は、Movefileの設定で.scssは同期しない、などもできるので便利。

SCSSは書いてて楽しいし、CSSしか書いたことない人にも気軽に勧められるのが良い。

いや、マジで雑食過ぎるなこのブログ。