皆様、いかがお過ごしでしょうか。歌乃です。

タイトル通りです。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コマンド備忘録」こちらからどうぞ。



Post If you feel like it, I would be happy if you could post it.