簡単なSASS/SCSSの導入方法【Gulp・yarnの使い方】

こんにちは。ダタク [@iQeeeda] です。

と思っていたら先日、保守がつらそうな直書きの CSS を見ました...

そもそも SASS/SCSS ってなんやねん...という人もいるかもしれませんが、
簡単に言うとプログラミング風に CSS 書こうぜ! というものです。

グローバル環境に Node.js をインストールすると開発環境を汚染してしまいます。
nodebrew コマンドを使うといつでもバージョン切り替えできるので便利です。

nodebrew install v12.13.1
nodebrew use v12.13.1

nodebrew を使ったことがない方は、以下の記事を参考にしてみてください。

Node.js のライブラリを導入するために yarn コマンドを導入します。
npm よりも yarn の方が早いので、最近はこちらを使うことが多いですね。

# Mac の場合
brew install yarn

# その他 OS: bash と zsh の場合
curl -o- -L https://yarnpkg.com/install.sh | bash
curl -o- -L https://yarnpkg.com/install.sh | zsh

詳しいインストール方法は公式サイトを参照してください。

yarn add -D gulp@next を実行して、バージョン 4.0 以降の Gulp をインストールしてください。

cd [プロジェクト]

# プロジェクトの中に Gulp バージョン 4.0 以降、その他プラグインをインストール
yarn add -D gulp@next gulp-sass gulp-autoprefixer gulp-plumber

# グローバル環境にも Gulp バージョン 4.0 以降をインストール
yarn global add gulp@next

# バージョン確認
gulp -v
CLI version: 2.2.0
Local version: 4.0.2

今回は ./src/scss/style.scss を変換して ./public/css 配下に style.css を出力してみます。
人によってディレクトリ名が違うので、以下の値は書き換えてください。

const { watch, series, task, src, dest } = require('gulp');
const scss                               = require('gulp-sass');
const autoprefixer                       = require('gulp-autoprefixer');
const plumber                            = require('gulp-plumber');

const convertToCss = () =>
  src('./src/scss/style.scss')
      .pipe(plumber())
      .pipe(scss())
      .pipe(autoprefixer())
      .pipe(dest('./wp-content/themes/xeory_base-child'));

const watchScss = () =>
  watch('./src/scss/**/*.scss', convertToCss);

exports.default = watchScss;

...な人もいるかもしれません。
しかし Gulp 職人になるのは中級者以上なので、最初はコピペで問題ありません。

style.scss が sample.scss を読み込んで利用して、
style.scss を style.css に変換・出力する...というサンプルを作成します。

まず下記コマンドを実行してください。

# 終了するときは ⌃C
gulp

次に style.scss を作成します。

@charset "UTF-8";

// sample.scss モジュール読み込み
@import "sample.scss";

sample.scss では変数を使って body の文字色を管理してみましょう。

$dark_gray_color: #5e6265;

body {
  color: $dark_gray_color;
}

ファイル保存してください。すると ./wp-content/themes/xeory_base-child に style.css が生成されているはずです。HTML では、この style.css を読み込むようにしましょう。