まずは完成形

// package.json
…省略…
scripts {
"sass:dev": "npx sass --watch --style compressed ./src/sass/:./html/css/"
},
…省略…

$ npm run sass:dev

SASSの自動コンパイルを実装しよう

完成形から解説した方が早いので、まずは完成形を確認してみてください。

npx sass --watch --style compressed ./src/sass/:./html/css/

大まかに内容を説明すると、次のような設定をしています。

• 「npx sass」を使ってSASSファイルをコンパイル
• 「./src/sass/配下」のファイルを「./css/配下」に出力
• 出力後のスタイルを「compressed」に設定
• 自動コンパイル

では、ひとつずつ見ていきますね！

npx sassの意味

SASSファイルを変換する際に「npx sass」を使います。
「sass」はSASSファイルを変換しますよ～
というのは、なんとなく分かると思います。

「npx」とは何ぞ？

「npx」を指定することで、npmでインストールしたパッケージを使用します！
というのを明示的に表しています。

記述しない場合は、PCにインストールされているコマンドを参照してしまいます。
そうなると、バージョンに不都合が起きたり、そもそもPC側にインストールされていない可能性が起きます。

なので、npmでインストールしたコマンドを実行するときには、常に「npx」を付けておくのを忘れないようにしてくださいね！

ファイルの出力を設定

まずは、どのSASSファイルを何処に出力するかを設定していきます。

ちなみにフォルダの構成は下の画像のようになっています。

画像

htmlフォルダが実際にサイトに公開される範囲になります。

srcフォルダは開発用のフォルダで、実際に公開することはありません。
このsrcフォルダの中にSASSファイルを入れていきます。

今回は、「./src/sass/」の中にあるSASSファイルを変換して「./html/css/」に出力したいと思います！

これを設定するためには、次のオプションを付けてあげます。

./src/sass/:./html/css/

第1回の【Node.jsを使ってSASSを始めよう！】では、1つのSASSファイルを1つのCSSに変換していました。
しかし、実際の現場では複数のSASSファイルを1つ(もしくは複数)のCSSに変換させます。

そうすることで、次のような幸せが訪れます。

• 複数のSASSにする
  →コードが見やすくなる
• 1つのCSSにする
  →ページの表示速度が向上する

複数のSASSを変換するときには、SASSファイルがあるフォルダのパスと出力先のフォルダのパスを「:（コロン）」で結べばOKです！

{SASSフォルダのパス}:{CSSフォルダのパス}

出力後のスタイルを変えてみる

今度は、出力先であるCSSファイルのスタイル（出力形式）を変えていきます。

CSSには、いくつか記述方法があるのは知っていますか？

例えば、僕たちがよく書いてる【expanded】

.hoge {
width: 300px;
}
.foo {
font-size: 18px;
}

もしくは、クラスが1列になっている【compact】

.hoge { width: 300px; }
.foo { font-size: 18px; }

さらには、改行もスペースも無い【compressed】

.hoge{width: 300px;}.foo{font-size: 18px;}

などなど、あります。

この形をどれにするかを決めるオプションが【--style】になります。

基本的に、どれでもOKです。
まぁ、迷ったら改行もスペースもない「compressed」ですかね！
ファイルの容量も減るし、CSSファイルを勝手に編集されるリスクも低くなるのでオススメです！
※明らかに編集できない感を出しとく。

自動的にコンパイルする

さて、いよいよ自動コンパイルに移ります！

といっても、watchオプションを付けるだけでOKですｗ

--watch

SASSコマンドに、この記述を加えるだけで自動コンパイルが出来ます。
自動コンパイルの仕様は以下のようになります。

• SASSコマンドを起動させると永続的にコマンドが実行される
  ※停止する場合は、「ctrl+c」でOKです。
• SASSファイルを保存したときに変換が実行される
  ※変換されるのは保存したファイルのみです。

npm scriptsを理解しよう

SASSの自動コンパイルが出来たら、今度は【npm scripts】について紹介していきます！
npm scriptsは、gulpに代表されるタスクランナーのようなものです。

npm scriptsを使うメリットの１つが、自作のコマンドを作ることが出来る点です。
例えば、さっきのSASSのコマンド

npx sass --watch --style compressed ./src/sass/:./html/css/

これを毎回入力するのは面倒ですよねｗｗ
一応、ターミナル上でキーボードの「↑」を入力すると履歴は見れますが、他のコマンドを操作しているとすぐに埋もれてしまいます・・・。

もし、

npm run sass

だけで、

npx sass --watch --style compressed ./src/sass/:./html/css/

が実行出来たら、めちゃめちゃ便利じゃないですか！？
これを可能にするのがnpm scriptsです！

package.json から npm scriptsを設定

さっそく、自作コマンドを作っていきましょう！

作るためにはpackage.jsonを編集します。
package.jsonの中に「scripts」という記述があると思います。

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},

ここにSASSのコンパイル用のコマンドを追加していきます。

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"sass:dev": "npx sass --watch --style compressed ./src/sass/:./html/css/"
},

コマンド名は「sass:dev」にしています。
「dev」の部分は開発（developper）という意味です。
開発用に使うときは、こちらを使います。

本番用に「sass:prd」を作る予定ですが、こちらは最終回に作りますね！

ちなみに、各行の末尾に「,（カンマ）」を付けるのを忘れないでくださいね！
忘れてしまうとエラー吐いてしまうのでｗｗ

ターミナルに戻ります。

npm run sass:dev

を実行してみてください。
SASSのコマンドが実行されるのが分かると思います！

今回は以上になります！
次回は、SASSの基本にして超重要な【ネスト】についてやっていきます！

最後までありがとうございました～