npm scriptを使って自動的にSASSをコンパイルしよう!【使って覚えるSASS入門】

まずは完成形

// 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ですw

--watch

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

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

npm scriptsを理解しよう

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

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

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

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

もし、

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」を作る予定ですが、こちらは最終回に作りますね!

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

ターミナルに戻ります。

npm run sass:dev

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

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

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