SCSS / SASS Formatter & Beautifier
Format SCSS syntax and nested rules. Free, and runs entirely in your browser — nothing you enter is uploaded, stored or sent to a server.
About SCSS/SASS Formatter
SCSS is CSS with nesting, variables, mixins and // comments, and the layout problem it creates is the one nesting always creates: a rule four levels deep is unreadable unless the indentation is exact, and it stops being exact the moment anybody edits it by hand.
This lays it out by following the braces, which is what nesting actually is. Three things get special handling because a plain CSS formatter would damage them: // comments run to the end of the line and would otherwise swallow a declaration moved onto them; #{$name} interpolation contains braces that must not change the indent; and @use, @forward and @import end in a semicolon rather than opening a block.
The indented .sass syntax — no braces, no semicolons, meaning carried entirely by indentation — is a different language. It is not read here, because converting between the two is a rewrite rather than a reformat and a formatter that tried would produce something that was neither.
Where it helps
- Understands nesting, so a deeply nested rule is indented by what it actually is rather than by guesswork.
- Handles // comments, which plain CSS has no concept of and which a CSS formatter will happily break.
- Leaves #{…} interpolation alone, so a computed selector does not push everything after it one level too deep.
- Adds the semicolon a block's last declaration is usually missing, which is a real source of SCSS compile errors.
- Runs in the browser with no dependency, so an unreleased stylesheet does not have to be pasted into a third-party service.
Limits
- It formats rather than compiles: it will lay out SCSS that does not build, and it will not tell you that it does not build.
- The indented .sass syntax is a different language and is not read here.
- Long selector lists and long values are not wrapped to a column limit — the layout follows structure, not width.
- It does not sort properties, merge duplicate rules, or make any other opinionated change to what you wrote.
Frequently asked questions
Does this work on plain CSS?
Yes — plain CSS is valid SCSS, so it will be laid out correctly. The CSS Formatter is the more direct choice if that is all you have, but nothing goes wrong if you use this one.
Will it compile my SCSS to CSS?
No. It formats the source and leaves it as SCSS. Compiling means resolving variables, mixins and imports, which needs the whole project rather than one file.
Why is my .sass file mangled?
Because .sass is the indented syntax, which has no braces or semicolons at all, and this formatter follows braces. The two are different languages that share a name — convert the file to .scss first.
Related tools
- CSS Formatter — Format stylesheets with consistent indentation
- Minifier — Shrink CSS, HTML or JavaScript
- CSS Unit Converter — px, rem, em, percentages and viewport units, with a preview
- Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
- HTML Formatter — Indent and tidy HTML markup
- JavaScript Formatter — Re-indent JavaScript and TypeScript source
More Web Development tools
- HTML Formatter — Indent and tidy HTML markup
- CSS Formatter — Format stylesheets with consistent indentation
- JavaScript Formatter — Re-indent JavaScript and TypeScript source
- TypeScript Formatter — Format TypeScript source code
- SQL Formatter — Format SQL statements with dialect selection
- SQL Minifier — Collapse formatted SQL into compact text
- CSS Unit Converter — px, rem, em, percentages and viewport units, with a preview
- Query String Parser and Builder — Convert query strings into editable key-value data
- CSP Generator — Build a Content-Security-Policy, or check one, and write it for your server or framework
- CORS Generator — Write CORS configuration for nginx, Express, Go, Django, ASP.NET, Spring and more, and test an origin against it
- cURL Builder — Build an HTTP request and get it as curl, JavaScript, TypeScript, Go, Python, PHP, C#, Java and more
- Minifier — Shrink CSS, HTML or JavaScript
- Flexbox Playground — Try every flex property and read the CSS back
- CSS Grid Playground — Build a grid template and see the tracks it makes
- Responsive Viewport Tester — Render your markup at phone, tablet and desktop widths
- SVG Path Viewer — Draw path data and read back what it contains
- SVG to CSS Converter — Turn an SVG into a data URI for CSS or an img tag
- OAuth 2.0 / OIDC Helper — PKCE verifiers and challenges, state, nonce, and checking what came back
- Regex Tester — Test patterns, inspect groups and preview replacements
- User-Agent Parser — Identify the browser, engine, operating system and device behind a User-Agent string
- HTTP Status Codes — Look up what a status code means, when to send it, and whether it is cached or safe to retry
- HTML to JSX — Convert HTML and SVG markup into JSX for React, with styles, attributes and whitespace handled
- Semver Checker — Test versions against npm ranges, sort them by precedence, and see what each bump produces
- Cookie Parser and Builder — Read Set-Cookie and Cookie headers, check them against browser rules, and write one for your framework