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

  • このエントリーをはてなブックマークに追加
  • Pocket

こんにちは。タクマ™ [@suwaru_blog] です。

最近めっきりと CSS を書く機会が減ったなあ。

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

…と悪評が広がる前に、まだ SCSS 使っていない人は早めに慣れた方がいいですよ!
今回は簡単にできる SASS/SCSS 導入方法を紹介します。

【前提】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 で Gulp をインストールする方法が紹介されていますが、
それだと旧世代の Gulp がインストールされてしまいます。

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 を出力してみます。
人によってディレクトリ名が違うので、以下の値は書き換えてください。

  • ./src/scss/style.scss
    • 出力元の SCSS ファイル
  • ./wp-content/themes/xeory_base-child
    • CSS 出力先のディレクトリ名
    • 今回は WordPress の子テーマフォルダ内を想定

プロジェクト/gulpfile.js

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 を使いたければ、文字列を scsssass に置換するだけで OK です。

なぜか SCSS のことを SASS と呼ぶ風潮があります。
実際の主流は SCSS なので、こちらを使うことを強くオススメします。

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

実際に SCSS を試してみる

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

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

# 終了するときは ⌃C
gulp

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

プロジェクト/src/scss/style.scss

@charset "UTF-8";

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

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

プロジェクト/src/scss/sample.scss

$dark_gray_color: #5e6265;

body {
  color: $dark_gray_color;
}

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

関連記事

お仕事ください!

僕が代表を務める 株式会社 EeeeG では Web 制作・システム開発・マーケティング相談を行っています。
なにかお困りごとがあれば、Twitter DM や Web サイトからお気軽にご相談ください。

カテゴリ「Develop」の最新記事

最新記事

コメント

コメントを残す

*