Tools
SCSS Code Formatter
Paste your SCSS code and click Format to clean it up with Prettier. Tab size and (for JS/TS) trailing semicolons are configurable. Switch languages from the toolbar.
About the SCSS formatter
This tool reformats SCSS source using Prettier's scss parser: paste a stylesheet, click Format, and the editor's contents are replaced in place with a consistently indented, consistently spaced version of the same code. Formatting runs entirely in your browser via Prettier's standalone build — nothing you paste is uploaded, logged, or sent to a server.
Under the hood, the scss, css, and less parsers all come from the same Prettier plugin bundle (prettier/plugins/postcss) — only the parser name changes, selecting which dialect's grammar applies. That distinction is what makes SCSS support real rather than cosmetic: SCSS adds $variables, nesting with &, @mixin/@include, @if/@else, @use/@forward, #{} interpolation, and // line comments that plain CSS doesn't have. Feed the same source into the plain css parser and it throws — a // comment alone produces CssSyntaxError: Unknown word — because CSS's grammar has no concept of a line comment.
Reach for it whenever SCSS lands in an inconsistent shape — pasted from Stack Overflow, exported from a design tool, or written without a save-time formatter wired into the editor. It also doubles as a fast syntax check: Prettier has to fully parse a file before it can print it, so invalid SCSS (an unclosed brace, an unterminated string, a stray #{) throws an error naming the exact line and column instead of silently passing broken input through — worth running before you paste generated or copied SCSS into a build that would fail on it less legibly.
Examples
/* input */
$brand: #2E8B57;
.btn{padding:8px 16px;&:hover{color:$brand}}
/* output (tab size 2) */
$brand: #2e8b57;
.btn {
padding: 8px 16px;
&:hover {
color: $brand;
}
}Braces move onto their own line, : gets a following space, and hex colors are lowercased. Nested rules like &:hover indent by whatever the 'Tab size' control above is set to — 2 spaces here.
/* input */
// button variants
@mixin variant($bg) { background:$bg; }
.btn-primary{@include variant(#2e8b57);}
/* output */
// button variants
@mixin variant($bg) {
background: $bg;
}
.btn-primary {
@include variant(#2e8b57);
}@mixin, @include, and // line comments have no meaning in plain CSS. Feeding this exact input to /tools/formatter/css instead throws CssSyntaxError: Unknown word on the comment line.
/* input */
$sizes: (small: 4px, medium: 8px, large:16px);
/* output */
$sizes: (
small: 4px,
medium: 8px,
large: 16px
);Sass maps are printed one key per line no matter how they were originally wrapped — useful since hand-aligning a map's colons and commas is tedious to keep consistent across a file.
Frequently asked questions
Why isn't this the same tool as the CSS formatter?
SCSS adds syntax plain CSS doesn't have — $variables, nesting with &, @mixin/@include, @if/@else, #{} interpolation, and // line comments. Feeding SCSS through the plain css parser fails the moment it hits one of those constructs; a // comment alone throws CssSyntaxError: Unknown word, since CSS's grammar has no line-comment syntax at all.
Will formatting change my Sass variables, values, or logic?
No. Prettier only rewrites whitespace, brace placement, quote style, and hex-color case — it never renames a variable, reorders a declaration, or changes a value. If the output looks functionally different from the input, that's a sign the original had a bug the parser is exposing, not something the formatter introduced.
Why is there no 'Semicolons' checkbox on this page?
That control only appears for the JavaScript and TypeScript formatters. Prettier's semi option is a JS-only concept and is silently ignored by the CSS family of parsers (css/less/scss), so there's nothing for a checkbox to toggle here.
Does formatting also catch syntax errors in my SCSS?
Yes, as a side effect — Prettier has to fully parse a stylesheet before it can print it, so invalid SCSS (an unclosed brace, an unterminated string) throws an error instead of being silently passed through. The error names the exact line and column of the problem.
Is my SCSS uploaded anywhere when I click Format?
No. Formatting runs entirely in your browser using Prettier's standalone build — the code never leaves your tab, and nothing is logged or stored.