SCSS Formatter

SCSS formatter: beautify Sass stylesheets online

An SCSS formatter indents nested rules, mixins, and maps so pasted Sass is readable again. Use it when DevTools, email, or a CMS flattens your stylesheet into one hard-to-scan block.

This page targets SCSS/Sass syntax (nesting, `$variables`, `@mixin` / `@include`). For plain CSS after compilation, use the CSS formatter instead.

How to use this converter

1. Paste SCSS—partials, mixins, or a full `.scss` file.
2. Pick an indent size that matches your project (often 2 spaces).
3. Click Format to expand braces and nest levels, or Minify for a compact blob.
4. Copy back into your editor and run your usual Sass compiler or linter.

Before and after examples

Nesting, variables, and mixins

Formatted SCSS keeps parent selectors, `&` references, and nested media queries aligned so you can spot missing braces quickly. Dollar variables and maps stay as written—the tool does not resolve values or expand `@mixin` bodies.

If you paste CSS that was already compiled from Sass, nesting is gone. Prefer the CSS formatter for that output, or reformat the original SCSS source when you still have it.

Beautify vs minify

Beautify is for editing and code review. Minify collapses whitespace for size checks or quick embeds; it is a poor day-to-day edit format. Comments—including license headers—may be stripped in minify mode, so keep originals in git.

Typical workflow with CSS and HTML

Format the SCSS source here, compile locally or in CI, then inspect the CSS if you need to debug cascade issues. Pair with the HTML formatter when cleaning email templates that ship inline styles, and with the CSS formatter when comparing compiled output to hand-written rules.

Frequently asked questions