まずは完成形
// 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の基本にして超重要な【ネスト】についてやっていきます!
最後までありがとうございました~