Overview
Paste SCSS and get it beautified with consistent indentation and brace placement - powered by js-beautify’s css_beautify, the same beautification engine used by the CSS Formatter and LESS Formatter. SCSS’s $variables and nested rules are structurally similar enough to plain CSS that css_beautify reformats whitespace cleanly without corrupting or attempting to interpret them - it never resolves variables or flattens nesting, it only adjusts layout. To actually compile SCSS down to plain CSS instead, use the SCSS Compiler. Runs entirely client-side.
Best for: Cleaning up minified or inconsistently indented SCSS source for review
How to use this tool
- Paste SCSS. $variables and nested rules pass through untouched as literal text.
- Beautified instantly. css_beautify reformats whitespace and brace placement, adjustable indentation.
- Copy the result. Copy the reformatted SCSS, still valid SCSS - not compiled CSS.
Frequently asked questions
No - it only reformats whitespace and brace placement. $variables, nesting, and mixins pass through exactly as written. To get compiled plain CSS instead, use the SCSS Compiler.
No - SCSS’s brace-and-semicolon structure is close enough to plain CSS that css_beautify handles $variables and nested selectors as ordinary tokens, the same way it already does for LESS’s @variables in the LESS Formatter.