すぐ忘れる自分のためのsassコマンド備忘録

2024-04-22 13:50 web css sass

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

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

ツイートいいんじゃね。と感じたらツイートしてもらえると喜びます。

タイーツタイーツもできます。