ミニファイされたCSSからSCSSは復元できる？整形・書き直しの方法も解説

Web制作をしていると、納品や公開の際にミニファイ（圧縮）されたCSSしか残っていない…なんてことがあります。
「引き継いだ案件のSCSSファイルがないけど、CSSから復元できないの？」と悩んだ経験はありませんか？

結論から言うと、ミニファイCSSを整形して「人間が読みやすい形」に戻すことはできますが、元のSCSSそのものを完全に復元することはできません。

この記事では、その理由と、実際にどうやってCSSを整形してSCSSとして再利用できるのかを解説します。

1. ミニファイCSSからSCSSは復元できる？結論

CSSを整形して可読性を上げることは可能
しかし、SCSSにしか存在しない情報（変数・mixin・ネスト構造）は復元不可能

つまり「元のSCSSファイルと全く同じもの」は戻せませんが、整形したCSSをベースに新しいSCSSを作り直すことはできるというのが現実的な答えです。

2. SCSSが完全には戻せない理由

SCSSからCSSにコンパイルする過程で、さまざまな情報が削ぎ落とされます。

変数（$main-color など）
→ CSSには直接値（#333など）が展開されるため、どこに共通変数が使われていたのか分かりません。
mixinや関数
→ 展開済みのプロパティ列になるため、どの部分がmixin由来なのかは判断できません。
ネスト（入れ子構造）
→ すべてフラットなセレクタに展開されるため、どんな階層構造で書かれていたのかは消えてしまいます。
コメントや開発者の意図
→ コンパイル時に削除されるため、元の設計思想は残りません。

このため、「復元」ではなく「整形してリファクタリング」することが現実的な対応になります。

3. ミニファイされたCSSを整形して読みやすくする方法

まずはCSSを人間が読める形に整形しましょう。

例：ミニファイCSS

body{margin:0;padding:0;color:#333;font-size:14px}h1{font-size:24px;color:#000}

整形後のCSS

body {
  margin: 0;
  padding: 0;
  color: #333;
  font-size: 14px;
}

h1 {
  font-size: 24px;
  color: #000;
}

これだけで、ぐっと読みやすくなります。

4. SCSSとして再利用するためのリファクタリングのコツ

整形したCSSをベースに、SCSSらしい形にリファクタリングしていきましょう。

変数化する $main-color: #333; $heading-color: #000;
mixinを作る @mixin font-setting($size, $color) { font-size: $size; color: $color; }
ネスト構造に直す body { margin: 0; padding: 0; color: $main-color; font-size: 14px; h1 { @include font-setting(24px, $heading-color); } }

こうすることで、保守しやすいSCSSファイルとして再生できます。

5. 実際のコード例（ビフォー・アフター）

ミニファイCSS（ビフォー）

body{margin:0;padding:0;color:#333;font-size:14px}h1{font-size:24px;color:#000}

整形後CSS

body {
  margin: 0;
  padding: 0;
  color: #333;
  font-size: 14px;
}

h1 {
  font-size: 24px;
  color: #000;
}

SCSSに書き直した例（アフター）

$main-color: #333;
$heading-color: #000;

body {
  margin: 0;
  padding: 0;
  color: $main-color;
  font-size: 14px;

  h1 {
    font-size: 24px;
    color: $heading-color;
  }
}

6. まとめ：CSSを整形して、SCSSは再構築しよう

ミニファイCSS → 読みやすいCSSに整形することは可能
SCSSにしかない情報（変数・mixin・ネスト）は復元できない
整形したCSSをベースに、新しくSCSSとして書き直すのが現実的な方法