SCSS Formatter
Clean up messy SCSS with Prettier's battle-tested formatter, right in your browser.
Example
Minified, messy SCSS in:
$primary:#3366ff;.card{color:$primary;.title{font-weight:bold;&:hover{color:red}}}Cleanly formatted out:
$primary: #3366ff;
.card {
color: $primary;
.title {
font-weight: bold;
&:hover {
color: red;
}
}
}How it works
Paste SCSS into the input and it formats live using Prettier's scss parser (2-space indent). Click Convert to reformat manually, or copy the result.
Good to know
This SCSS Formatter takes messy, hand-edited, or minified Sass source and rewrites it with consistent two-space indentation, proper brace placement, and clean spacing around colons, values, and nested selectors. It is built for front-end developers, theme authors, and anyone reviewing a stylesheet who wants readable SCSS without setting up a local Prettier install, a build step, or a code editor plugin.
Reach for it when you have pasted a partial style block from a diff or chat, when a teammate hands you a compressed snippet, or when you want a quick consistency pass before committing. Because it formats source rather than compiling it, your variables, mixins, nesting, @media blocks, and ampersand selectors all survive intact, so the output is still valid SCSS you can drop straight back into a partial.
To read the result, compare the right-hand pane against your input structure rather than its content: the formatter does not change which rules exist or what they do, only how they are laid out. The status line reports the formatted character count on success, and on failure it shows the first line of a syntax error, which is a useful hint that a brace, semicolon, or interpolation is unbalanced before you paste the code into a real project.
One practical caveat: this tool only formats, it does not compile to CSS, resolve variables, or run functions like darken(). If the output looks identical to your input, the code was already well formatted. If you get a syntax error, the formatter is correctly refusing to guess at broken Sass, so fix the flagged line and run it again.
Frequently asked questions
Does this compile SCSS into CSS?
No. It only formats and beautifies SCSS source so it stays valid SCSS, preserving variables, nesting, mixins, and ampersand selectors. To compile to CSS you need a Sass compiler.
Is my SCSS sent to a server?
No. Formatting runs entirely in your browser using the Prettier library, so your code never leaves your machine.
Is my data uploaded anywhere?
No — this tool runs entirely in your browser. Your input never leaves your device and it works offline once loaded.
Is it free?
Yes, completely free with no sign-up and no limits.
People also ask
What is the difference between formatting SCSS and compiling SCSS?
Formatting only rewrites the layout of your Sass source so it stays valid SCSS, keeping variables, nesting, and mixins as-is. Compiling runs a Sass compiler that resolves those features and produces plain CSS that browsers can read.
What indentation does this SCSS formatter use?
It formats with two-space indentation, which is the default Prettier style for SCSS. Each level of nesting adds two more spaces.
Will formatting change how my SCSS behaves?
No. Formatting only adjusts whitespace, indentation, and brace placement; it does not add, remove, or reorder rules, so the compiled CSS output stays the same.
Why does the formatter show a syntax error?
It reports a syntax error when the input is not valid SCSS, usually from an unclosed brace, a missing semicolon, or a broken interpolation. Fix the flagged line and run it again.
Can I format a CSS file with an SCSS formatter?
Yes, plain CSS is a subset of SCSS, so valid CSS will format correctly here. However the output is treated as SCSS, so a dedicated CSS or Less formatter may be more appropriate for non-Sass files.
Does this tool work offline?
Yes, once the page and its formatting library have loaded in your browser, it runs entirely client-side and needs no further network connection. Your code is never uploaded to a server.
What is an ampersand selector in SCSS and is it preserved?
The ampersand (&) refers to the parent selector inside a nested block, commonly used for states like &:hover. The formatter keeps ampersand selectors intact and simply indents them consistently.
Can the formatter handle mixins, media queries, and nested rules?
Yes. It preserves @mixin, @include, @media blocks, and arbitrarily nested selectors while normalizing their indentation and spacing.
Related tools