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」を使うとよいです。
