WebToolsPlanet
CSS Tools

SCSS Beautifier

Paste minified or messy SCSS code and get it back formatted with consistent indentation, one property per line, and proper brace spacing.

Last updated: May 21, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is SCSS Beautifier?

SCSS (Sassy CSS) is the primary SCSS syntax for Sass — a CSS superset that adds variables (`$var`), nesting, mixins, functions, and more. This tool reformats SCSS code with consistent indentation and spacing, handling the full range of SCSS syntax including `&` parent selectors, `@mixin`, `@include`, and `@extend`.

SCSS is valid CSS, so standard CSS properties are also formatted correctly.

How to Use SCSS Beautifier

1

Paste SCSS code into the input area or click "Load Sample"

2

Choose indent size (2 or 4 spaces)

3

Optionally place opening braces on a new line

4

Copy the formatted output

Common Use Cases

  • Developers formatting compressed or auto-generated SCSS from build pipelines.
  • Teams enforcing consistent SCSS formatting before committing to version control.
  • Front-end engineers cleaning up SCSS from third-party component libraries.
  • Developers quickly reformatting SCSS copied from documentation.

Example Input and Output

Minified SCSS with nested rules and $variables is reformatted.

Minified SCSS
$primary:#3b82f6;.card{background:$primary;.title{font-size:1.25rem;color:#fff;}}
Formatted SCSS
$primary: #3b82f6;
.card {
  background: $primary;
  .title {
    font-size: 1.25rem;
    color: #fff;
  }
}

Privacy

All formatting runs in your browser. No code is sent to any server.

Frequently Asked Questions

Does this compile SCSS to CSS?

No — this tool only formats existing SCSS code. To compile SCSS to CSS, you need the Sass compiler (sass npm package or a build tool like Vite or webpack with sass-loader).

What is the difference between SCSS and SASS syntax?

SCSS uses CSS-like brace syntax (compatible with CSS). The original SASS syntax uses indentation instead of braces. This tool handles SCSS (brace) syntax.

Related Tools