SCSS Formatter
Format and indent SCSS code into a clean, readable structure directly in your browser.
This tool runs entirely in your browser. Your files are never uploaded to a server.
$color:#3366ff;
.button {
color:$color;
&:hover {
opacity:.8;
}
}What this formatter does
Rearranges SCSS-like text with line breaks after opening braces, closing braces, and semicolons, plus two-space indentation for each nested brace level — including SCSS nesting, &:hover-style parent selectors, and @mixin/@include blocks, which are all just brace-delimited blocks to this formatter.
How to use it
Paste SCSS into the editor and the formatted result updates immediately. Copy the result when ready, or use Reset to clear the editor; Reset does not restore the original sample.
Formatting behavior
Outside quoted strings and comments, runs of whitespace are reduced and declarations are split after semicolons, the same way for a plain CSS rule, a nested selector, or the body of a mixin. Quoted content, escaped characters, block comments, and recognized // line comments are preserved; interpolation like #{$var} passes through unchanged since it's just characters within a declaration.
Important parser limitation
This is a lightweight character-based formatter, not a SCSS compiler, parser, or linter — it does not compile Sass to CSS, resolve variables or @mixin/@include/@extend directives, validate nesting depth, or check for Sass-specific syntax errors. It also does not normalize spacing around colons, sort properties, or expand shorthand.
Safe review workflow
Because the formatter only reacts to braces, quotes, and semicolons, unusual constructs — deeply nested & selectors, control directives like @if/@each, or unquoted interpolation — can produce surprising indentation. Review the output and compile it with your normal Sass toolchain before relying on it in production.
Privacy
Processing happens locally in your browser. The pasted SCSS is not uploaded by this tool.
Frequently Asked Questions
- What does the SCSS Formatter do?
- Format and indent SCSS code into a clean, readable structure directly in your browser.
- Does this SCSS tool change program behavior?
- It only changes layout or removable whitespace. Review minified output before production use when code relies on unusual syntax.
- Is my code uploaded?
- Processing is local and your code is never uploaded.