はじめに
こんにちは。
早速ですが、皆さんはSassって何かご存知でしょうか。
Sass（Syntactically Awesome Style Sheets）は、CSSに機能を追加した拡張言語です。通常のCSSよりも効率的にスタイルを書くことができ、コードの再利用性や管理がしやすくなります。
…と言ってもイメージ沸かないですよね。非常に申し訳ないのですが、私はSassを学ぶ前で現時点ではこの程度しか説明できません。知識を身に着けたらチュートリアル編などの記事を書きたいと思います
という事で前振りが長くなりましたが、Sassを使う為にはまず環境構築が必要になります。
本記事は、Sassの環境構築、コンパイルについて、備忘録として記事にまとめます。
記事中で用語についてざっくり説明しますが、細かい話は分からないので気になる人はご自身で調べてみてください。
目次
1．なぜ環境構築が必要なのか
2．Node.jsのインストール
3．gulpモジュールのインストール
4．Sassモジュールのインストール
5．gulpの設定
6．コンパイルを実行
7．まとめ
1．なぜ環境構築が必要なのか
Sassの環境構築が必要な理由は、ブラウザがSassのコードを理解できない為、通常のCSSにコンパイルする必要があります。そしてコンパイルするには専用の環境が必要になります。
Sassのコンパイルは色々な方法がありますが、この記事では開発現場で使われているという方法で環境構築していきます。（...らしいです）
2．Node.jsのインストール
Sassやgulpといったツールをインストールする為に必要となります。
それでは、Node.jsを公式HPからをインストールします。公式HPにアクセスすると自動的におすすめのバージョンが選択されています。
選択されていない場合は、推奨版であるLTS（Long Term Suport）の最新バージョンを選択してください。
選択が終わりましたらインストーラをインストールしてください。
インストールが終わりましたら、インストールが成功しているか確認します。
コマンドプロンプトで以下のコマンドを実行します。※Macの方はターミナル
npm -v
バージョンを表す数字が表示されれば成功です。
（例）10.8.1
3．gulpモジュールのインストール
gulpは、Node.jsをベースとしたタスクランナーです。
主にWeb開発のプロセスを自動化して効率化する為に使われます。
今回はSassをコンパイルする為に使います。
3.1.プロジェクトフォルダ作成
gulpインストールの前に準備をします。
まず、gulpを格納する為のフォルダを作成します。
任意の場所でOKですが、今回はデスクトップに作成します。
mkdir Sass-tutorial //mkdirコマンドでフォルダを作成
cd Sass-tutorial //cdコマンドでSass-tutorialに移動
3.2.package.json作成
次にpackage.jsonファイルを作成します。
このファイルは、プロジェクトごとのNode.js設定ファイルになります。
それでは以下のコマンドを実行してください。
npm init -y //package.jsonを作成
先ほど作成したSass-tutorialフォルダにpackage.jsonが作成されていれば成功です。
3.3.gulpのインストール
それでは準備が整いましたのでgulpのインストールをします。
以下のコマンドを実行してください。
npm install gulp --save-dev //gulpのインストール
下記画像の通りpackage.json内のdevDependenciesにgulpの表記があれば問題ありません。
devDependenciesは、開発環境でのみ必要なパッケージをリスト化する為の表記になります。
他のパッケージをインストールする場合、以下のようにします
npm install [パッケージ名] --save-dev //パッケージのインストール
4．Sassモジュールのインストール
gulpでコンパイルする為のプラグインとコンパイラをインストールします。
4.1.プラグインとコンパイラをインストール
プラグインとコンパイラをインストールをインストールします。
以下のコマンドを実行してください。
//gulp-sass：コンパイルするプラグイン
//sass；コンパイラ
npm install --save-dev gulp-sass sass
package.json内にgulp-sassとsassの記述があれば成功です。
5.gulpの設定
gulpの設定を行います。
gulpの設定を行います。ulpは「タスク」という概念を使って様々な処理を行います。
今回は、Sassをコンパイルするタスクを定義して処理を実行します。
5.1.gulpfile.js作成
まずはgulpfileを作成します。gulpfileはgulpの設定を行います。ulpの設定ファイルになります。
Sassにおいては、コンパイルする時に便利な設定ができたりします。他にも色々な設定ができますので是非調べてみてください。
それでは以下のコマンドでファイルを作成します。※Macの方はtouchコマンド
echo. > gulpfile.js //gulpfile.js作成
5.2.タスクの作成～自動コンパイル
次にSassをコンパイルするタスクを作成します。
以下のタスクは、Sassファイルに変更を加えると自動でCSSファイルにコンパイルします。
gulpfile.jsを以下の通り記述してください。
const gulp = require('gulp'); //gulpモジュールをインポート
const sass = require('gulp-sass')(require('sass')); //gulp-sass、sassモジュールをインポート
//Sassをコンパイルするタスクを定義
gulp.task('sass', () => { //sassというタスクを定義
return gulp.watch('css/style.scss', () => { // style.scssを監視
return (
gulp
.src('css/style.scss') //style.scssを取得
.pipe( //取得したstyle.scssをsass()メソッドに渡す
sass({ //CSSファイルにコンパイル
outputStyle: 'expanded', //CSSがインデントされた形式で出力
})
// コンパイルエラーをログに表示
// ※エラーが発生してもタスクが停止しないようにしている
.on('error', sass.logError)
)
.pipe(gulp.dest('css')) //コンパイルされたファイルをcssフォルダに格納
);
});
});
それでは順番に解説していきたいと思います。
▼モジュールをインポート
以下のコードは、gulpを使用してSassファイルをコンパイルする為に必要なモジュールをインポートします。
requireメソッド
インポートするにはrequireメソッドを使います。
requireメソッドは、Node.jsのモジュールをインポートする為の関数です。
require('gulp')
gulp本体をインポートします。これによりgulpのメソッドやタスクを定義して実行することができます。
require('gulp-sass')
gulpのプラグインをインポートします。
gulp-sassは、SassファイルをCSSファイルにコンパイルする機能です。
(require('sass'))
Sassのコンパイラをインストールします。
現在、推奨されるコンパイラはDart Sass（sass）でこれを指定しています。
const gulp = require('gulp'); //gulpモジュールをインポート
const sass = require('
-sass')(require('sass')); //gulp-sass、sassモジュールをインポート
▼タスクの定義
以下のコードでタスクを定義します。
gulp.task()
task()メソッドは、タスクを定義するためのものです。Sassのコンパイル以外に様々なタスクを定義して処理を実行することができます。
gulp.task('sass', () => {
//タスクの処理
});
▼タスクを監視
以下のコードはSassファイルの変更を監視し、変更があった時に指定の処理を行います。
return
gulpは、タスクを非同期に処理することが多く、タスクが完了する前に次のタスクに進んでしまう可能性があります。returnすることでタスクの終了を待つことができます。
gulp.watch()
watch()メソッドで指定したディレクトリやファイルの変更を監視します。
return gulp.watch('css/style.scss', () => {
//監視するタスクの処理
});
▼コンパイル
以下のコードは、Sassファイルに変更があった時にコンパイルする処理です。
watch()メソッド内に記述しています。
ストリーム
ここでストリームというgulpの概念について説明します。
gulpは、ファイル操作やコンパイルなどの一連の処理を「ストリーム」と呼ばれるデータの流れで実行します。一連の処理とはsrc、pipe、destなどを繋げる形で処理が進みます。
これから説明するコンパイルの流れを理解することで、ストリームのイメージが付くと思います。
.src('css/style.scss')
src()メソッドで処理したいファイルを取得して次の処理に渡します。
※一連の処理「ストリーム」の始まりです。
.pipe()
pipe()メソッドは、ストリーム内のデータを次の処理に渡すメソッドです。pipe()メソッドを使って、一連の処理をチェーンのように繋げることができます。
sass({ outputStyle: 'expanded', })
sass()メソッドでSassファイルをコンパイルしてCSSファイルに変換します。
outputStyle: 'expanded'
コンパイラされたCSSの出力形式を指定します。
'expanded'は、読みやすいインデント形式でCSSが出力されるオプションです。
.on('error', sass.logError)
on()メソッドは、gulpやNode.jsのストリームで使われているイベントリスナーを登録するメソッドです。
'error', sass.logErrorは、errorイベントが発生した時、sass.logErrorというエラーハンドラを実行します。
sass.logErrorは、エラーメッセージをコンソールに表示するための関数です。これがないとエラー発生時にgulpのタスクが停止しますが、これを使用することでエラーメッセージが表示され、タスクが停止せずに継続できます。
.pipe(gulp.dest('css'))
dest()メソッドは、コンパイル後のファイルを指定したディレクトリに保存するためのメソッドです。これによりSassファイルがCSSファイルに変換され、指定のディレクトリに出力されます。
//▼監視するタスクの処理
return (
gulp
.src('css/style.scss') //style.scssを取得
.pipe( //取得したstyle.scssをsass()メソッドに渡す
sass({ //CSSファイルにコンパイル
outputStyle: 'expanded', //CSSがインデントされた形式で出力
})
// コンパイルエラーをログに表示
// ※エラーが発生してもタスクが停止しないようにしている
.on('error', sass.logError)
)
.pipe(gulp.dest('css')) //コンパイルされたファイルをcssフォルダに格納
);
6.コンパイルを実行
準備が整いましたので実際にコンパイルの流れを見ていきましょう。
まずはSassファイルを作成します。
Sassのファイルを作成する前に拡張子について説明しておきます。
Sassの拡張子は2種類あります。
1．.sass（記述方法：インデント形式）
インデントベースの構文でブロックやネストのルールがあります。
CSSのように波括弧{}やセミコロン;を使わずに記述します。
2．.scss（記述方法：CSS互換式）
CSSと互換性のある構文で通常のCSSと同じ記述ができます。
CSSのように波括弧{}やセミコロン;を使って記述します。
好みにはなりますが、私はCSSとほぼ同じ記述ができる.scssを採用しました。
それでは、cssフォルダにstyle.scssを作成します。
次にタスクを実行します。
コンパイルする為には、gulpでコマンドを実行する必要があります。
以下のコマンドをコマンドプロンプトやターミナルで実行してください。
npx gulp タスク名とコマンドを実行する事で、定義したタスクの処理が開始されます。
タスクを終了したい場合は、ターミナルでctrl + cを打ち、Yes or Noの選択肢が出るのでYesとすることでタスクを終了することができます。
//ターミナルで
npx gulp sass
以下のように表示されていれば成功です。
これにより、style.scssファイルの監視タスクが始まり、変更があった時に自動でコンパイルされます。
それでは、style.scssファイルを以下のように編集します。
.container {
width: 80%;
h1 {
font-size: 2rem;
}
}
※記述の解説は割愛します。
編集が終わりましたら保存して、CSSファイル出力先を確認します。
以下のようにCSSファイルが出力されていれば成功です。
次にstyle.scssの中身を確認します。
はい、Sassファイルで記述した通りに出力されていますね。
コンパイル成功になります。
7．まとめ
本記事では、Sassの環境構築とコンパイル方法について解説しました。
これからSassの学習を始める方、環境構築が上手くできなくて困っている方は是非こちらの記事を参考にチャレンジしてみてください。
Sassの記述方法については後日、チュートリアル編を記事にしますので、良ければそちらも読んでいただけると幸いです。
長々とありがとうございました。