Format and Minify Sass (SCSS)
SCSS is Sass's CSS-like syntax: everything valid in CSS is valid SCSS, plus nesting, variables, mixins, and functions. This formatter indents it consistently and can minify it back down, running entirely in your browser.
What SCSS syntax does it understand?
Nested rules and the & parent selector, $variables,
@mixin and @include, @extend,
@function and @return, the control directives
@if / @else / @each / @for,
@use and @import, nested properties
(font: { family: serif; }), #{} interpolation, and
// line comments alongside ordinary /* */ ones.
Why do my values change slightly?
A few things are normalised so that formatting is consistent regardless of how it was
typed. A comma inside function arguments gains a space, so rgba(0,0,0,.5)
becomes rgba(0, 0, 0, 0.5) — which also shows the other rule, a bare
decimal gaining a leading zero. Arithmetic * and + get spaces
around them, turning $n*2 into $n * 2.
/ is deliberately left alone. In CSS it separates shorthand values
— font: 12px/1.5, grid-area: 1/2/3/4 — so spacing
it out would change meaning rather than tidy it. The inside of calc() is
untouched for the same reason.
Does it compile SCSS to CSS?
No. This is a formatter, not a compiler: it tidies your source and hands it back as SCSS, with the nesting, variables, and mixins still intact. Compiling — resolving variables, flattening nesting, and expanding mixins into plain CSS — is a job for the Sass compiler in your build. If you already have compiled output and want to tidy that instead, use the CSS Formatter.
What if my braces do not balance?
You get an error saying so, and nothing is reformatted. An unclosed or stray brace is
almost always a genuine mistake, and reformatting around it would move your code without
fixing anything — and could disguise where the problem started. Braces inside
comments, quoted strings, and #{} interpolation are ignored when checking,
so those will not trigger a false alarm.
Related tools
For plain stylesheets, the CSS Formatter applies the same layout rules without the Sass extensions. For markup and data, see the HTML Formatter, XML Formatter, and JSON Formatter & Minifier.
Last reviewed: August 2026