【学習ログ】Sass のテキスト学習ログ - フロントエンド学習記(仮題)

はじめに

前回の投稿から数日ぶりの投稿になります。ブログ開始当初は、出来るだけ毎日更新を心掛けようと思っていたのに間隔が開いてしまい、少し反省中です。（汗）

今回は、以前に環境構築を行っていた Sass についての書籍を購入・学習したので、学習した事をログに残したいと思います。

学習したもの

Web 制作者のための Sass の教科書改訂 2 版 Web デザインの現場で必須の CSS プリプロセッサ

書籍の概要

今回学習した書籍は、タスクランナーの gulp と gulp を機能拡張する gulp-sass パッケージを主に利用して、 Sass の学習を行っていくという内容です。

分かった事

ルール・プロパティのネスト、コメント、変数、制御構文、mixin、関数などなど Sass の基本となる部分について理解出来ました。（出来たと思います。）
gulp の基本的な使い方、主に gulpfile.json の記載方法について分かった気がします。

分からなかった事

上記では、gulpfile.json の記載方法が分かったと書いていますが、公式ドキュメントを参照する前はよく分かりませんでした。というのも、書籍はバージョン 3.9 系で説明されていたのに、自分はバージョン 4.X 系でインストールしてしまい（単純に npm install -D gulp と打ったら最新版がインストールされました）、一部書籍と検証環境とで gulpfile.json ファイルの記載ルールが異なっていて、うまく動かない箇所があった為です。
- 不明点を解消する為、公式ドキュメントを参照したところ Ver. 3.9.1 以前と Ver. 4.X 系以降とでは gulpfile.json の記載方法が変わった事が分かりました。詳しくは gulp 公式ドキュメントを参照願いますが、主にタスク内容の記載方法と gulp コマンドの呼び出し方が大幅に変わり、今までの task() API で記述する方法が非推奨となり将来的に削除される予定になりました。

小さな発見

今後、Sass を利用してコードを書いていく事を想定した時にブラウザ間の差異解消の為、 normalize.css を Sass のコンパイル後に出力される CSS ファイル内に取り込みたいと考え、実現できる方法を検索・実験をしたところ下記で実現できそうな事が分かりました。

【2019/10/26 追記】
Sass の公式ドキュメントにも記載がありました。最初からよく読んでおけばよかったです。とほほ。

記述箇所: @importの Importing CSS 項目 に記載がありました。

検証環境
gulp      : ver. 4.0.2
gulp-sass : ver. 4.0.2

フォルダ構成(一部)
project
┃
┣ css
┃ ┗ style.css
┃
┣ sass
┃ ┗ style.sass
┃
┣ node_modules
┃ ┗ normalize.css
┃     ┗ normalize.css

// style.sass

// このように @import しようとすると、生成した CSS からファイルを参照する。
@import "../node_modules/normalize.css/normalize.css";
@import url("../node_modules/normalize.css/normalize.css");

// CSS ファイル内に normalize.css の中身を含めたい場合は、下記のように記述。
@import "../node_modules/normalize.css/normalize";

/* style.css */

/* 生成した CSS からファイルを参照する。 */
@import "../node_modules/normalize.css/normalize.css";
@import url("../node_modules/normalize.css/normalize.css");

/* 生成した CSS の内容に normalize.css の内容を含む */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**

.....
....
...

まとめ

最終的に Sass よりも gulp について、学習している時間の方が長かったように思います。本題から脇道に逸れた事を反省しつつ、すごく勉強になったので良かったです。今回学習した内容を生かしてコーディングをしていきたいと思います。

最後までご覧頂きありがとうございました。