peartools

SCSS Formatter and Beautifier

Paste messy SCSS and get it back with one declaration per line and nested rules indented clearly. Your variables, nesting, and mixins are kept exactly as written. Everything runs in your browser, so your code stays on your device.

Indent
Result

What an SCSS formatter does

SCSS is the most common Sass syntax, and it adds variables, nesting, and mixins on top of CSS. That extra structure is easy to make messy. A formatter, also called a beautifier, rewrites the source with one declaration per line and each nested rule indented under its parent, so the structure is clear. This tool formats the SCSS source only. It does not compile it to CSS, so everything you wrote is kept.

Why use our SCSS beautifier

  • ·Free. No signup, no paywall, no limits.
  • ·Runs in your browser. Your code is never uploaded, so it is safe for private projects.
  • ·Keeps your Sass. Variables, nesting, and mixins are preserved, not compiled away.
  • ·Your house style. Choose 2 or 4 space indentation to match your project.
  • ·Syntax highlighting. The editor colours selectors and variables, and lets you collapse and expand nested rules.

SCSS formatter options

Format

Rewrites your SCSS with one declaration per line and consistent indentation, keeping nested rules, variables, and mixins clear. Turns messy Sass into clean, readable code.

Before.a{$c:red;color:$c;.b{margin:0}}After.a { $c: red; color: $c; .b { margin: 0; } }

Nesting

Nested selectors are reindented one level per parent, so the structure of your SCSS reads clearly no matter how deep the nesting goes.

Before.a{.b{.c{top:0}}}AfterEach level indented under its parent

Indent

Choose 2 or 4 spaces for each level of nesting, so the formatted SCSS matches the style used in the rest of your project.

Before2 spaces or 4 spacesAfterYour choice per level

When to format SCSS

A formatter helps whenever your Sass source is hard to read. These are the cases that come up most:

  • ·Cleaning up a partial. Fix the indentation of an SCSS partial before you commit it.
  • ·Cleaning up pasted code. Reformat SCSS copied from a theme, a framework, or a tutorial so it matches your style.
  • ·Reviewing a pull request. Make deeply nested rules readable before you review or merge them.
  • ·Learning Sass. See how nesting and variables are laid out while you are learning.

Official Sass and SCSS resources

SCSS is one of the two syntaxes of Sass. To go further than formatting, these are the official references from the Sass team:

Run the same SCSS formatter in your project

This tool formats SCSS with Prettier, which most front end projects already use. To apply the same formatting to your stylesheets:

ToUse
Format every SCSS filenpx prettier --write "**/*.scss"
Check without changing filesnpx prettier --check "**/*.scss"
Keep settings in the repoAdd a .prettierrc file with your "tabWidth"

Prettier keeps SCSS features like variables, nesting, and mixins as written, so the formatted file still compiles the same way.

Related formatters

Working across stylesheets and markup? These formatters run the same way, right in your browser:

Frequently asked questions

What is an SCSS formatter?
An SCSS formatter takes Sass code (the SCSS syntax) that has messy spacing and rewrites it with one declaration per line and consistent indentation, keeping nested rules, variables, and mixins clear. It does not compile the SCSS to CSS, it only cleans up how the source is laid out.
How do I format SCSS?
Paste your SCSS into the input box, pick your indentation, then click Format. The clean version appears below. Click the copy button to copy it, or download it as a .scss file.
Does this compile SCSS to CSS?
No. This tool formats the SCSS source so it is easy to read. It does not run the Sass compiler, so variables, nesting, and mixins are kept as written. Use it to clean up your Sass, then compile it with your normal build.
Does formatting change how my SCSS compiles?
No. Formatting only adds or removes whitespace and reindents the code. The selectors, variables, nesting, and mixins stay the same, so it compiles to exactly the same CSS as before.
Is this a Sass beautifier?
Yes. Format and beautify mean the same thing here: taking messy SCSS and laying it out cleanly with proper indentation. Some people call it a Sass or SCSS beautifier, prettifier, or pretty printer.
Is my SCSS kept private?
Yes. All formatting runs in your browser. Your SCSS is never uploaded to a server or saved anywhere, so you can safely paste in code from a private project. Once the page has loaded you can even use it offline.