SCSS Formatter
Use the CaseSwitch SCSS Formatter to indent nested SCSS (variables, `&` parents) for review. Paste a snippet, copy the formatted source. Formatting runs in this browser — it does not compile to CSS.
Written by the CaseSwitch editorial team. We maintain these tools in the browser so drafts, keys, and images stay on your device.
Last reviewed: 23 July 2026
Processed locally in your browser. Nothing is sent to a server.
Paste or type text to convert. Output stays empty until there is input.
Character count: 0 · Word count: 0 · Line count: 0
Examples
Variable plus nesting
Input
$primary:#333;nav{ul{margin:0}}Output
$primary: #333;
nav {
ul {
margin: 0;
}
}Parent selector
Input
.btn{color:#fff;&:hover{color:#ddd}}Output
.btn {
color: #fff;
&:hover {
color: #ddd;
}
}Nested media
Input
.card{padding:1rem;@media(min-width:768px){padding:2rem}}Output
.card {
padding: 1rem;
@media (min-width: 768px) {
padding: 2rem;
}
}Map-like list spacing
Input
$sizes:(sm:4px,md:8px);
Output
$sizes: ( sm: 4px, md: 8px, );
Variable plus interpolated class
Input
$name:block;.#{$name}{display:block}Output
$name: block;
.#{$name} {
display: block;
}How to use
- Paste SCSS source (variables, nested rules, mixins).
- Review indentation that shows nesting depth.
- Copy the result. Compile with sass in your build when you need CSS.
What this tool is for
Design tokens and nested rules often live in SCSS. This page formats that source so nesting is visible. Keeping the paste local matters when the file includes internal brand colors. It is not dart-sass and will not emit CSS.
How it works
Pretty mode runs Prettier with the SCSS parser so `$variables`, nesting, and `&` selectors remain. Minify collapses whitespace. `@use` / `@forward` complexity may exceed what you want to paste into a tab — prefer the editor for whole modules.
When to use it
Cleaning a mixin you copied, reviewing a theme file fragment, preparing a style PR comment, and teaching nesting with a readable example.
When not to use it
Not a Sass compiler. Plain CSS without nesting belongs on the CSS Formatter. Do not expect CSS output from this page.
How it compares to related tools
CSS Formatter for plain CSS. The two are not interchangeable if you rely on nesting or variables. HTML/JS formatters use different parsers.
Common mistakes
Assuming formatted SCSS is compiled. Mixing team tab/space rules without checking CI. Pasting a whole design-system package into the browser tab.
Format vs compile
Formatted SCSS is still SCSS. Browsers do not run it. Use dart-sass or your bundler integration to emit CSS. This page only changes whitespace and Prettier’s SCSS pretty-printing rules.
Comments and license headers
Typical `//` and `/* */` comments should survive formatting. If a license header must stay byte-identical, verify after format or exclude that file from auto-format in CI.
Frequently asked questions
Can I compile SCSS to CSS here?+
No. This page formats SCSS source. Use sass in your build for CSS output.
Are comments kept?+
Typical `//` and `/* */` comments should survive formatting. Verify if you rely on them as license headers.
Does this understand @use and @forward?+
Many snippets format; large module graphs belong in your editor with the real Sass toolchain.
Should I use this or the CSS formatter?+
Use SCSS when you have nesting, variables, or mixins. Use CSS for plain stylesheets.
Is my SCSS uploaded?+
No. Formatting runs in this browser.
Will minify produce valid CSS?+
Minify only collapses whitespace in the SCSS text. It does not compile. Browsers still will not understand `$variables`.
Does this tool send my payload to CaseSwitch?+
No. Formatting, encoding, and naming conversions for this page run in your browser after load — your sample stays on the device.
Related tools
CSS Formatter
Inspecting a production CSS file, cleaning a snippet from Stack Overflow, teaching cascade with readable examples, and preparing a small style review.
JavaScript Formatter
Reading a minified function from DevTools, cleaning a gist, sharing a snippet in a ticket, and normalizing a short example before a PR comment.
HTML Formatter & Minifier
Cleaning an email HTML snippet, reviewing a CMS export, shrinking a static fragment for a demo, and making a nested list readable before you edit it by hand.
TypeScript Formatter
Cleaning a type copied from a library .d.ts, reviewing a generic-heavy snippet, preparing a PR comment, and normalizing a short TSX-ish example.
XML Formatter
Debugging an API that still speaks XML, cleaning an SVG you will edit by hand, reading a Maven pom snippet, and comparing two responses visually.