sassで上手くコンパイルされないという人の為の記事

更新日：2022年12月6日

近頃CSSの上位互換とされるSassが最近流行しています。
Sassには「SASS」、「SCSS」という2種類の書き方がありますが、今主流で使われているのは「SCSS」の方の書き方です。
いざSassを導入しようとして、RubyをインストールしてKoalaもインストールして準備万端な状態になったとしましょう。そしていざscssファイルを更新したというのに、cssファイルに更新が反映されないのだけど…とお困りの方の為の記事になります。
Sassを使うには「config.rb」というファイルを用意して、そこに設定を記述する必要があります。他の色んなサイトを拝見したところ、Sassの導入方法がご紹介されていましたが、「config.rb」についての説明が不十分だったり、そもそも触れられていなかったりしたので簡単にですが助けになればいいかと。
サンプルをダウンロード出来るように用意しているので、こちらをお使い下さい。

簡単な解説ですが、例えばあなたのWebサイトのディレクトリ構造がこういったものだったとしましょう。

index.html
　┗common
　　　┗css
　　　　　┗style.css

これにSassを導入したとすると、このようなディレクトリ構造になります。

index.html
　┗common
　　　┣css
　　　┃　┗style.css
　　　┣scss
　　　┃　┗style.scss
　　　┗config.rb

「config.rb」にディレクトリ構造の設定をして自由にすることが出来るのですが、一般的にはcssフォルダもscssフォルダも同階層に作成して、実際に触る際にはscssフォルダの中のscssファイルを…ということが多いです。
scssファイルを更新すると、cssフォルダの中にscssファイルと同名のcssファイルがコンパイルされるというものになります。

このような作りにする場合は、テキストファイル（メモ帳）に以下のように記述した上で、「config.rb」という名前で保存して下さい。

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
output_style = :compressed
relative_assets = true	

ごくごくSassを使う際の一般的な設定になるかと思います。
詳細については割愛しますが、これだけで「config.rb」の作成は完了です。

そしてこの例でいうところのcommonフォルダを、Koalaを立ち上げてドロップ＆ドラッグした上で、scssファイルを更新すればcssファイルがコンパイルされます。
一度お試しあれ！