Is my SCSS sent to a server?

No. All formatting runs entirely in your browser with JavaScript. Nothing is transmitted anywhere and your code never leaves your device.

Does this handle nested selectors and the parent selector (&)?

Yes. The formatter tracks brace depth so nested rules, mixins, and the & parent selector are indented at the correct level automatically.

Yes. Interpolation braces are recognized as part of the surrounding value or selector, so they are not mistaken for a nested rule block.

Yes. Sass variables ($name: value;), @mixin, @include, @if/@else, @each, and @for are all indented like any other rule or declaration.

No. This tool only reformats SCSS syntax for readability. It does not compile Sass to CSS or resolve variables, mixins, or imports.

Name: SCSS Formatter
Availability: InStock
Author: Nham Vu

Paste SCSS and get clean, consistently indented, correctly nested output instantly in your browser.

Paste SCSS here

Formatting Options

Indent style

Indent size

Blank line between top-level rules Preserve comments

Paste SCSS on the left and click Format SCSS.

Paste SCSS and get clean, consistently indented, correctly nested output instantly in your browser.

Paste your SCSS into the input textarea on the left.
Choose your preferred indent style and size, and toggle blank lines or comment preservation.
Click Format SCSS to process the input.
Review the formatted, correctly nested output on the right, with live line and byte counts.
Click Copy to copy the formatted SCSS to your clipboard.

Unminify third-party or bundled SCSS for debugging and readability.
Standardize indentation across partials before committing to source control.
Clean up nested rules, mixins, and variables pasted from Stack Overflow or documentation.
Reformat SCSS exported from a build tool or design handoff before reviewing it.
Check that deeply nested selectors and interpolation still compile after a quick edit.

Last updated: 2026-07-23 · Reviewed by Nham Vu