SCSS formatter
Paste SCSS that is squeezed onto few lines or indented inconsistently and get it back with one declaration per line and nesting shown by indent. Only whitespace changes.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Paste your SCSS.
- Choose 2 spaces, 4 spaces or a tab.
- Copy the result.
- One declaration per line, as
property: value;, with the missing last semicolon added.
{ after the selector, } on its own line, a blank line between rules.- Selector lists one per line, with spaces around
>, + and ~.
} @else { stays on one line.- Strings,
url(...), /* */ and // comments, and #{...} interpolations are never split or reflowed.
Example
.a{&:hover{color:red}}
becomes
.a {
&:hover {
color: red;
}
}
Good to know
Whitespace inside a value is collapsed to one space. If you use the indented .sass syntax, this tool is not for it: it needs braces.
Frequently asked questions
Does it handle SCSS-only syntax?
Yes for the common parts: nested rules, & selectors, $variables, @mixin and @include with or without a block, @if and @else, // line comments and #{ } interpolation. Interpolations are kept exactly as written.
What happens to a // comment at the end of a line?
It moves to its own line, directly after the declaration it followed. Comments on their own line stay where they are.
Are Sass maps and multi-line values kept?
Values are put on one line, with whitespace collapsed. A map written over several lines becomes one line, so format maps by hand if you prefer them tall.
Does the formatter check that SCSS compiles?
No. It checks only that braces, parentheses, strings and comments are balanced, and reports the line and column if not. It does not know which properties, functions or variables exist.
Can I use it for plain CSS?
Yes. Plain CSS is valid SCSS, and the result is the same as from a CSS beautifier.