【Node.js】node-sassでsass/scssをコンパイルする

代わりにDartSassを使いましょう。

【Node.js】npmからDartSassを使う【LibSassは非推奨になった】こんにちは、おぐらです。 過去にSassのコンパイルについてまとめた記事を投稿しましたが、最近になってSassに動きがあったので再度作...

Node.jsでsassを使う時の方法をまとめた記事を書こうかと思ったのですが、長くなりすぎるので方法ごとにわけて記事を作成することにしました。

sassにはsass記法、scss記法で分かれますが、sass表記が圧倒的に多くnpmパッケージの名称もsassなのでsassで統一します。

node-sassはNode.jsでsassを扱うためのパッケージ

node-sassはC/C++で実装されたsass「Libsass」をNode.jsで扱うためのパッケージです。本家のsassはRubyで実装されたおり、Libsassは本家と比較して高速、省メモリのです。またLIbsassはあくまでライブラリとしてAPIを提供しており、各言語でそのAPIを利用すればいいので特定の言語に依存しません。

node-sassを使うために必要なもの

node-sassパッケージを使うためにはNode.jsとnpm（あるいはyarn）が必要です。過去にwindows10でnodistを使ったNode.jsのインストール方法を紹介した記事がありますので、もしwindows10ユーザーの方でNode.jsとnpmのインストールに困った方は見てみてください。

windows10でnodistを使ったNode.jsのインストール、バージョン管理

node-sassのcliでsassをコンパイルする

node-sassのcli（コマンドラインインターフェース）を使ってsassをコンパイルする方法です。コードを記述したりするわけではなく、cliでnode-sassコマンドを入力してsassをcssにコンパイルする1番シンプルで簡単な方法です。

npmをinitしたあとnode-sassをインストールします。

npm install node-sass

node-sassをインストールしたらあとはcliでnode-sassコマンドをつかってコンパイルするだけです。

node-sass [options] <input> [output]

上記がnode-sassコマンドの基本的な使い方です。node-sassの後にオプション、インプット、アウトプットの順で記述します。オプションは有れば記述すればいいので下記の例のようにインプット、アウトプットだけの記述でもコンパイルできます。

node-sass src/style.scss dest/style.css

node-sassコマンドでsrcディレクトリのstyle.scssファイルをstyle.cssにコンパイルします。style.cssはdestディレクトリに作成します。

コンパイル後のコードを出力形式を設定する

コンパイル後のcssの出力形式は–output-styleオプションで設定できます。設定できる形式はnested、expanded 、compact 、compressedの4種類がありますので、好みや規約に合わせて設定してください。出力形式の設定をオプションに入れる場合は下記のようにコマンドを入力します。

node-sass　--output-style expanded src/style.scss dest/style.css

ファイルの更新を監視する

ファイルの更新を監視したい時はwatchオプションを設定します。watchオプションを設定するとファイルを更新した時に自動的にコンパイルが走るので毎回コマンドを入力するする必要がなくなり効率的です。

watchオプションは–watchが正式なコマンドですが、-wと省略できます。オプションを複数設定する時はコマンドを追加していけばいいだけです。

node-sass -w　--output-style expanded src/style.scss dest/style.css

オプションは上記の2種類の他にもあり、インデントの数や、改行の形式など細かく設定できます。オプションに関してはnode-sassのリポジトリで確認することができます。

sass/node-sass: Node.js bindings to libsass

node-sassコマンドはオプションを設定すると長くなりますし、毎回コマンドを入力するのは効率的ではないのでnpm scriptに登録して使います。

// packeged.json
...中略
"scripts": {
  "build": "node-sass　--output-style expanded src/style.scss dest/style.css",
  "watch": "node-sass -w　--output-style expanded src/style.scss dest/style.css"
}

node-sassを使ってsassをcssにコンパイルする方法でした。他にもNode.jsではgulpやwebpackでsassを扱う方法があるので、別記事として作成します。