SCSSデータがもらえない!
業務上、他社がつくったwebサイトの運用を引き継ぐという案件がたまに発生します。(2025年も2件ぐらいありました)
その際、以前の制作会社からHTMLやCSS、画像などのサイトデータ一式を引き継ぐわけですが、「明らかにSCSSからコンパイルされたであろうCSS」データはくれるものの、「元になったSCSSデータ」は渡してもらえない、というケースがほとんどでした。(筆者の経験だと9割超もらえた試しがありません)
確かに、SCSSってwebの制作会社からすれば自社のノウハウの塊みたいなものですし、たとえwebサイトの運用を引き継ぐ会社であれど渡したくないのは気持ちとしては分かります。
ただ、サイトの運用を引き継ぐ側としては、SCSSからコンパイルされたCSSを直接編集するのって、どこにどんなスタイルがあるのかをコードリーディングして把握することから始めないといけないし、メディアクエリもCSSファイルの至る所に散らばってるしで、ぶっちゃけすごく更新しづらいんですね・・・
しかも、「これ絶対SCSSからコンパイルしたヤツ」ってのがCSSを見れば一目瞭然なので、「SCSSデータくれればこんなことしなくて済むのに・・・」とやる気がものすごく下がるんです(特に、明らかにSCSSからコンパイルされているCSSなのに「SCSSください」と伝えて「CSSしかないんです〜」と嘘を吐かれた時のやるせなさは計り知れない・・・)
とまあそんな案件が何件か続いた時にふと頭によぎったことがありました。
LLMを使えばCSSからSCSSへの逆コンパイルも可能なのではないか? と・・・
CSS→SCSS変換ができるオンラインツールつくってみた
SCSSからCSSへのコンパイルは、不可逆的なコードの変換であり、通常は反対方向の変換(CSSからSCSS)ができません。
ただし、CSSコードを意味論的に解釈し、「元はおそらくこんなSCSSコードであっただろう」という推論は可能です。(むしろ、そのような推論はLLMが最も得意とするところです)
なので、入力されたCSSをLLMに推論させ、元のSCSSを予測させて変換する、というオンラインツールをつくってみました。
技術スタックとしては至って簡単で、CSSが入力されたらバックエンドで各種LLMのAPIを呼び出してSCSSに変換しているだけです。
使用するAPIはOpen AIとかGroqやDeepSeekなど、いろいろ試してみて出力の精度やAPI利用料の兼ね合いで程よいところを使っています。(使用するLLMによって出力されるSCSSにどんな違いが出るのかをテストしてみるのも面白いかもしれません)
webサービスとして提供する上で、基本的なプロンプトインジェクション攻撃への対策やAPIのトークンを大量消費されてとんでもない課金額を請求されることのないように、1時間に10回しか変換できないようにしています。(多分その辺はおおよそのLLMを用いたwebサービス開発の方法と同じ)
LLMを利用した推論なので、完璧に元のSCSSを復元する、という用途には向きませんが(というかそんなことは実質不可能)、CSSを直接編集するよりは断然コードの保守・運用が楽になります。(引き継ぎ案件でCSSしかもらえなくても、これからは「我に新兵器あり!」と私の心の中のアルバート・ハインライン大尉が言っています)
今後はこのオンラインツールをVS Codeの拡張機能とかに出来たらもっと便利かな〜と思っています。
筆者のように、「CSSしかもらえなくて困ってる🥺」というweb制作者の方の一助になれば幸いです。
よいお年を!