最近は scss をつかっています。SCSS の運用についてまとめておこうとおもったので、まとめます。

scss --watch を手元でうごかす運用などをすると、scss と css の両方を git レポジトリにコミットすることになって残念ですし、生成された css を直接いじる人があらわれてまきもどったりするのでそういった運用は避けています。

開発環境について

Plack::Middleware::Scss::Lite ( https://github.com/tokuhirom/Plack-Middleware-Scss-Lite ) というミドルウェアを配置して利用しています。これはリクエストがあったタイミングで scss コマンドがはしります。

実行する際、scss コマンドは、エラーメッセージも stdout に出力するので、stdout を capture することが肝要です。
コンパイルエラーになったときには

                body:before {
                    display: block;
                    font-size: 20px;
                    padding: 20px;
                    white-space: pre;
                    line-height: 1.33;
                    font-family: "Monaco", monospace";
                    color: #fff;
                    background: #900;
                    content: "SCSS ERROR\\A$buf";
                }

のような CSS を吐くことにより、エラーメッセージをブラウザで表示できるようにしています。この hack はシャレオツなのでオススメといえるでしょう。

本番環境について

deploy script で scss コマンドを走らせ、その結果を rsync しています。

とくに語ることはないです。

【20250103 追記】

現代ではもう scss はほとんどのケースでは不要となった。CSS 自体が進化してネストできるようになったのと react/vue/svelte などの台頭による。