SASS(Node.js版)を簡単インストールして簡単に常時実行する方法

SASSのNode.js版をインストールしてみました。参考にしたサイトによってはとても複雑な方法が紹介されていたのですが実際にはとても簡単だったのシェアします。

Node.jsのインストール

公式サイトよりインストーラーをダウンロードして実行します。特に変更することなく初期設定のまま次へと進んでいけばインストールは完了します。

SASSのインストール

コマンドプロンプトを開き以下のコマンドを実行します。

npm install -g sass

はい。これだけでSASSはインストールされています。とても簡単でした。

SASSを常時実行するバッチファイル

以下が.scss ファイルを編集すると自動的に .css を生成するバッチファイルです。先頭の数行はバッチファイルを最小化して実行するものなので、必須なのはコメントと改行を除くと最後の2行のみです。

if not "%1" == "1" (

    start /min cmd /c call "%~f0" 1
    exit
)

cd /d W:\MyProject\_sass

sass --watch "style.scss":"../_css/style.min.css" --style compressed
::sass --watch "style.scss":"../_css/style.min.css" --style expanded

※scssファイルまでのパスはご自身の環境に書き換えてください。

このファイルを sass_watch_start.bat などとして保存し、ダブルクリックで実行します。

バッチファイル実行

実行するとウィンドウは非表示となりますが、ウィドウを開くと実行ログが表示されます。

生成されたCSSは改行などが除去されて圧縮されていますが、最後のコメント行をこのように切り替えると、、

::sass --watch "style.scss":"../_css/style.min.css" --style compressed
sass --watch "style.scss":"../_css/style.min.css" --style expanded

人間がみても分かりやすい形で出力されますので、デバッグ時には「expanded」本番環境では「compressed」を使うとよいです。