皆様、いかがお過ごしでしょうか。歌乃です。
タイトル通りです。sass(dirt-sass)を使っているのですが、久々につかったら使い方がすっかり頭から抜けていたので今後のために覚書です。
基本的な使い方(ソースファイルのコンパイル)
#sass [ソースファイル] [出力先]
sass hoge.scss hoge.css
#相対パスで階層を指定 ./ or ../
sass ./hoge.scss ../css/hoge.css
変更があった場合のみコンパイル
sass --update hoge.scss hoge.css
#または
sass hoge.scss hoge.css --update
監視させたい場合(ソースファイルを変更すると自動でコンパイル)
sass hoge.scss hoge.css --watch
マップファイルの指定
sass hoge.scss hoge.css --source-map
#必要ない(作りたくない)場合は
sass hoge.scss hoge.css --no-source-map
出力形式の指定
#圧縮なしでcss展開する場合
sass hoge.scss hoge.css --style=expand
#圧縮(余白や改行等を削除してMinifier形式に)する場合
sass hoge.scss hoge.min.css --style=compressed
オプションは複数指定可能
sass hoge.scss ../css/hoge.min.css --no-source-map --style=compressed
だいたい上のコマンドを覚えていればなんとかなる!( ・`ω・´) たぶん。
ちなみにうちが使っているのはdirt-sassです。VSCodeのプラグインもあるのでおすすめです。
dirt-sassを使うことになった顛末は「すぐ忘れる自分のためのnpmコマンド備忘録」こちらからどうぞ。