When working on web development, there are times during delivery or release when only minified (compressed) CSS remains… Have you ever experienced the problem of thinking, “I don’t have the SCSS file for this inherited project, can’t I restore it from CSS?”

In conclusion, you can format minified CSS back into a “human-readable form,” but you cannot completely restore the original SCSS itself.

This article explains why, and how you can actually format CSS and reuse it as SCSS.

1. Can SCSS be restored from minified CSS? The answer

  • It is possible to format CSS to improve readability
  • However, information that only exists in SCSS (variables, mixins, nesting) cannot be restored

In other words, you can’t get back “exactly the same SCSS file,” but you can use the formatted CSS as a base to rebuild a new SCSS file — that’s the realistic answer.

2. Why SCSS cannot be fully restored

During the compilation process from SCSS to CSS, various information is stripped away.

  • Variables (like $main-color)
    → In CSS, these are replaced with direct values (like #333), so you can’t tell where common variables were used.
  • Mixins and functions
    → They are expanded into property declarations, so you can’t tell which parts came from a mixin.
  • Nesting (hierarchical structure)
    → Everything is expanded into flat selectors, so the original nested structure is lost.
  • Comments and developer intent
    → These are removed during compilation, so the original design intentions don’t remain.

Therefore, the practical approach is not “restoration,” but rather “formatting and refactoring”.

3. How to format minified CSS for readability

First, let’s format the CSS into a human-readable form.

Example: Minified CSS

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

Formatted CSS

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

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

Even this makes it much easier to read.

Recommended tools

With these tools, you can format minified CSS with just one click.

4. Tips for refactoring into SCSS

Based on the formatted CSS, let’s refactor it into an SCSS-like structure.

  • Use variables $main-color: #333; $heading-color: #000;
  • Create mixins @mixin font-setting($size, $color) { font-size: $size; color: $color; }
  • Convert into nested structure body { margin: 0; padding: 0; color: $main-color; font-size: 14px; h1 { @include font-setting(24px, $heading-color); } }

This way, you can recreate it as a maintainable SCSS file.

5. Actual code example (Before & After)

Minified CSS (Before)

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

Formatted CSS

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

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

Rewritten as SCSS (After)

$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. Summary: Format CSS and rebuild SCSS

  • Minified CSS → Can be formatted into readable CSS
  • Information unique to SCSS (variables, mixins, nesting) cannot be restored
  • The practical method is to rewrite formatted CSS into new SCSS