SCSS Formatter
Format and re-indent SCSS / Sass source by tracking brace nesting depth — rules, nested selectors, $variables, @mixin/@include and @if/@else/@each/@for blocks get consistent indentation, while comments, strings and #{} interpolation are left untouched. Structural formatting only, not a Sass compiler.
Input
Formatting Options
Output
Guides
Paste messy, compressed, or inconsistently indented SCSS / Sass and get clean, readable source back. The SCSS Formatter re-indents every block from its brace nesting, puts one declaration per line, and canonicalises spacing — a single space after each : in a declaration and after each ,, the opening { kept on its selector's line, and } on its own line.
What it does
- Structural re-indentation — indentation is recomputed from
{ }nesting depth, so deeply nested rules,@mediablocks and control directives line up no matter how the input was spaced. - SCSS-aware, not just CSS — it understands
$variables,@mixin/@include/@content,@if/@else/@each/@for, placeholder selectors (%name), the&parent selector, and#{…}interpolation. - Never breaks your code — braces that live inside
//line comments,/* … */block comments, string literals (including quotedurl("…")values) and#{…}interpolation are recognised and skipped, so they can never throw off the indentation.} @else {is kept on one line. - Configurable indent — 2 spaces (default), 4 spaces, or tabs.
How to use it
- Paste your SCSS into the box, or upload a
.scssfile. - Pick an indent size.
- Copy or download the formatted result. Formatting runs as you type.
Structural formatting, not a Sass compiler
This tool formats source — it does not compile it. It will not resolve $variables, expand @mixin/@include, evaluate @if/@each/@for, follow @use/@import, or compute any value. The output is the same SCSS you gave it, just tidied: identifiers, values, comment text and string contents are preserved exactly. If you need compiled CSS, run your SCSS through the Sass toolchain instead.
Does it change my selectors or values?
No. Only whitespace and line breaks are adjusted. Property names, values, variable names, interpolation and comments are emitted byte-for-byte — the formatter only decides where lines break and how far each line is indented.
Why did a colon inside a mixin argument keep its original spacing?
Space-after-colon is applied where a colon separates a property from its value in a declaration (color: red). A colon inside a selector (a:hover, ::before) or inside an at-rule prelude such as a mixin's argument list is left as written, because adding a space there would be wrong.
Is my code sent anywhere?
No. Formatting happens entirely in your browser — your SCSS never leaves your device.
Related tools
Working with plain CSS? Try the CSS Minifier & Beautifier. For other languages, see the code formatters for JavaScript, Rust, and more in the Formatters category.