SCSS Formatter
This SCSS formatter parses the file as SCSS, so nesting, the ampersand parent selector, dollar variables, mixin and include directives, control flow and inline comments are all recognised rather than treated as unrecognised CSS — a plain CSS formatter run over the same file will either bail out or quietly mangle the nesting. Note that this formats the source; it does not compile SCSS to CSS, which requires the Sass engine and is a build step rather than a text transformation.
How it works
Formats SCSS with its own parser, so nesting, the & parent selector, variables, mixins and @include directives are all understood rather than treated as unknown CSS.
This formats SCSS; it does not compile it to CSS. Compiling needs the Sass engine and is a separate step in your build.
Everything runs in your browser — nothing you paste is sent to a server.
How to format SCSS
- Paste your SCSS into the input on the left.
- Choose an indent size and wrap width.
- Copy or download the formatted result.
SCSS syntax is understood, not tolerated
Nesting, the & parent selector, $variables, @mixin and
@include, control directives and inline comments are all parsed as SCSS rather than treated as
unrecognised CSS. A plain CSS formatter run over the same file will either bail out or quietly mangle the nesting.
Formatting is not compiling
This tidies the source; it does not turn SCSS into CSS. Compiling requires the Sass engine and resolves imports, variables and mixins — a build step rather than a text transformation.
Common use cases
- Normalising a partial before committing it.
- Reading a deeply nested file someone else wrote.
- Cleaning up SCSS pasted out of a design handoff.
Frequently asked questions
Why not use a plain CSS formatter on SCSS?
Because SCSS syntax is not CSS. Nesting, the ampersand selector and dollar variables are not valid CSS, so a CSS formatter either refuses the file or reformats it into something that no longer compiles.
Does this compile SCSS to CSS?
No. It formats the source. Compiling resolves imports, variables and mixins and needs the Sass engine, which is a build step rather than a text transformation.
Is the indented Sass syntax supported?
No — this handles the SCSS syntax, the brace-and-semicolon dialect. The older indented .sass syntax is a different grammar.
Are comments preserved?
Yes. Both the CSS block form and the SCSS double-slash line form are kept and re-indented in place.
Is my code uploaded anywhere?
No. Everything runs entirely in your browser, so nothing you paste is transmitted or stored on a server.
Related tools
CSS Formatter & Beautifier
This CSS formatter puts one declaration per line and normalises spacing without rewriting your values.
LESS Formatter
This LESS formatter parses at-variables, nesting and mixin guards as real LESS.
CSS Minifier
This CSS minifier strips comments and whitespace while protecting strings and url() values.