About the SCSS Beautifier
SCSS that arrives from a pull request, a compiled bundle or a hurried refactor is often one long line per rule with nesting collapsed into it. This beautifier rebuilds the layout: every declaration gets its own line, each nesting level is indented by the amount you pick, comma separated selector lists are broken apart, and rules are separated by a blank line so the file scans quickly.
Preprocessor constructs pass through untouched. Variable declarations such as $brand: #f25f1e, @mixin and @include, @extend, @if and @each blocks, the parent selector &, interpolation written as #{$name}, and both comment styles keep their meaning. Nothing is renamed, reordered or removed, so the formatted file compiles to exactly the same CSS as the one you pasted.
Before any formatting runs, the input is checked for structural damage: an unbalanced brace, a block comment that never closes, or a string left open at the end of a line. Each of those is reported with a line and column rather than being quietly reformatted into something worse. That check is deliberately about structure and not about the language, so an undefined variable will format cleanly and only fail later. Run the result through the SCSS Compiler to confirm it still builds.
How to use
- Paste SCSS on the left, or drop a .scss file onto the editor.
- Pick the indent width, and choose whether each selector in a comma list gets its own line.
- Copy the formatted source or download it as formatted.scss.
Common questions
- Will formatting change the CSS my build produces?
- No. Only whitespace and line breaks change, so the compiled output is byte for byte the same as before.
- Does it work on plain CSS too?
- Yes, plain CSS is valid SCSS. If you have no preprocessor syntax at all, the CSS Formatter is the more direct choice.
- Are // line comments preserved?
- Yes. They stay where they are, though a trailing comment may be attached to the end of the preceding declaration.
- Why did I get an error about an unclosed brace?
- The structural check found more opening braces than closing ones. The reported line and column point at the block that was left open.