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

こんにちは。iQeda [@iQeeeda] です。

と思っていたら先日、超汚い直書きの CSS を見ました…
周りでも「あそこの制作会社はヤバい」と評判です。

【前提】Node.js 開発環境を構築する

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

そんな SASS/SCSS を使うためには Node.js 開発環境が必要です。

nodebrew で Node.js インストール

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

nodebrew install v12.13.1
nodebrew use v12.13.1

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

yarn インストール

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

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

Gulp とその他プラグインをインストール

タスクランナーと呼ばれる Gulp.js を使って SCSS の処理を管理します。

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

プロジェクトルートに gulpfile.js を作成する

今回は ./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 職人になるのは中級者以上なので、最初はコピペで問題ありません。

SASS を使いたい場合はどうすればいい？

gulpfile.js 内では SCSS を使うように設定しています。
もし SASS を使いたければ、文字列を scss → sass に置換するだけで OK です。

以下 SASS を使った感想です。

実際に SCSS を試してみる

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 を読み込むようにしましょう。

関連記事