SCSS Formatter

What this SCSS formatter does

SCSS lets you nest rules, store values in $variables, reuse blocks with @mixin and keep settings in maps. That power makes files grow quickly, and once several people edit the same stylesheet, the indentation drifts. One person writes color:$brand, another writes color : $brand ;, and nested blocks end up at random depths.

This tool reformats SCSS so every level of nesting is indented the same way, every declaration sits on its own line, and spacing around colons and braces is consistent. It uses Prettier 3 with its SCSS parser, running entirely in your browser.

How to use it

1. Paste your SCSS into the left box. It is formatted the moment you paste.
2. You can also press Open file to load a .scss file, or Sample to see an example.
3. Choose the Indent: 2 spaces, 4 spaces or Tabs.
4. Choose the Line width. Long selector lists, maps and include arguments wrap past this width.
5. Turn on Single quotes if your style guide prefers them.
6. Press Format, or Ctrl+Enter in the input.
7. Press Copy, or Download to save a .scss file.

After the first format, the output follows your edits as you type. If something is wrong, a message such as Line 2, column 3: Unclosed block appears below the boxes, and Show in input puts the cursor on that spot.

Before and after

A compressed SCSS snippet with a variable, a mixin and nested rules:

$brand:#3b82f6;@mixin card($pad:16px){padding:$pad;border-radius:8px}.nav{display:flex;gap:1rem;a{color:$brand;&:hover{text-decoration:underline}}.btn{@include card(12px)}}

After Format with 2 spaces:

$brand: #3b82f6;
@mixin card($pad: 16px) {
  padding: $pad;
  border-radius: 8px;
}
.nav {
  display: flex;
  gap: 1rem;
  a {
    color: $brand;
    &:hover {
      text-decoration: underline;
    }
  }
  .btn {
    @include card(12px);
  }
}

Each nesting level adds one indent, so you can see at a glance that &:hover belongs to the link inside .nav.

Sass maps are spread over several lines, one key per line:

$breakpoints: (
  small: 576px,
  medium: 768px,
  large: 992px
);

With Single quotes on, @use "sass:math"; becomes @use 'sass:math';. Line comments are kept exactly where they were:

// Header styles
.header {
  .logo {
    width: 120px;
  }
}

Errors and limits

The formatter has to parse your file before it can print it. A missing closing brace is the most common problem. For this input:

.nav {
  a { color: red;

the message is Line 2, column 3: Unclosed block, which points at the a { that was never closed.

Some things to know:

• The tool checks syntax, not meaning. An undefined variable or a mixin that does not exist is not reported. The Sass compiler finds those.
• It does not reorder properties or sort selectors. Your order is kept.
• The indented .sass syntax is not supported. Convert it to SCSS first, or format it in an editor that supports it.
• There is no Minify on this page. Minifying SCSS makes no sense because browsers only run CSS. Compile with Sass, then minify the CSS output.

Tips for cleaner SCSS

• Keep nesting shallow. Three levels is a common limit in style guides, because deep nesting creates long, fragile selectors.
• Put variables and maps in a separate partial such as _tokens.scss and load it with @use.
• Format before you commit. Small spacing changes otherwise end up mixed into real changes in code review.
• If you are working on plain CSS output, the CSS formatter can also minify it.

Other ways to format SCSS

• VS Code: install the Prettier extension, open the file and run Format Document (Shift+Alt+F on Windows, Shift+Option+F on macOS).
• Command line: npx prettier --write "src/**/*.scss" formats every SCSS file in a folder.
• JetBrains IDEs such as WebStorm have a built in Reformat Code action, and can use Prettier if it is installed in the project.

This page needs no setup and keeps your code on your device, which makes it a quick option for a snippet from a ticket, a CodePen or a teammate’s message. For the markup that uses these styles, try the HTML formatter, and for scripts, the JavaScript formatter.