SCSS Beautifier

Minified SCSS from a build artifact, carelessly formatted code from a fast commit, or SCSS copied from browser DevTools — none of it is readable as-is. This tool formats SCSS into consistently indented, clearly structured code with configurable style options.

What SCSS Formatting Does

A formatter applies a consistent structure to SCSS source code without changing its semantics. The compiled CSS output remains identical before and after formatting. What changes:

• Indentation: Each nesting level gets consistent indentation (2 spaces, 4 spaces, or tabs)
• Spacing: Consistent spaces around :, before {, and after ,
• Line breaks: Each property on its own line, each rule block separated from the next
• Quotes: Normalized to single or double quotes throughout
• Property order: Optionally sorted by a consistent ordering (Concentric CSS)

Indentation Options

2 Spaces — The Prettier default and the most common recommendation for SCSS. Keeps deeply nested selectors readable without excessive horizontal shift.

4 Spaces — Traditional C/Java style. Many legacy CSS codebases and older style guides use 4-space indentation across all file types.

Tabs — Each developer’s editor controls the visual width. Common in projects that mandate tab indentation across all languages.

Brace Style

Same line (K&R style):

.btn {
  color: #fff;

  &:hover {
    opacity: 0.8;
  }
}

New line (Allman style):

.btn
{
  color: #fff;

  &:hover
  {
    opacity: 0.8;
  }
}

Same-line is standard in CSS/SCSS. New-line is rare but sometimes required by project style guides that enforce Allman braces across all languages.

Quote Normalization

SCSS string values can use either single or double quotes — the compiled CSS output is the same either way. The formatter normalizes all simple string literals to your chosen quote style:

// Input (mixed quotes)
$font: "Inter", sans-serif;
content: 'hello';

// Output (single quote style)
$font: 'Inter', sans-serif;
content: 'hello';

Quotes inside strings that would require escaping are left unchanged.

Property Sort Order

When Sort Properties is enabled, declarations within each rule block are reordered using the Concentric CSS order. This order groups properties by the “distance from the element”:

1. Positioning — position, top, right, bottom, left, z-index
2. Display & flex/grid — display, flex-direction, justify-content, align-items, gap
3. Box model — width, height, margin, padding, border, box-sizing
4. Typography — font-family, font-size, font-weight, line-height, text-align, color
5. Visual — background, opacity, visibility, cursor
6. Animation — transition, animation, transform
7. Other — content, outline, custom properties

Properties not in the defined order are placed at the end alphabetically. This is identical to what Stylelint enforces with stylelint-config-concentric-order.

Blank Lines Between Blocks

With Empty Line Between Blocks enabled:

.btn {
  color: #fff;
}

.card {
  padding: 24px;
}

.nav {
  display: flex;
}

Without the option, blocks are written consecutively without blank separators. Some teams prefer this for compact output.

Before / After Comparison

Click Before / After to see a side-by-side diff of the original and formatted code. This is useful for reviewing what changed before replacing the original file.

What This Formatter Handles

• SCSS variables ($var: value;)
• Nested rules (&:hover, &-modifier, & .child)
• @mixin and @include declarations
• @media query blocks
• @keyframes and @font-face
• Single-line and block comments (// and /* */)
• String literals — contents are never modified by whitespace normalization

What This Formatter Does Not Handle

• Compilation errors: Invalid SCSS syntax is not caught or reported
• @extend relationships: No warnings if @extend targets don’t exist
• Sass indented syntax (.sass files with indentation-based syntax): This formatter expects .scss syntax with braces
• Plugin-specific syntax: PostCSS-specific at-rules may format unexpectedly

For production SCSS formatting, use Prettier with prettier-plugin-scss as part of your build pipeline. This tool is for quick formatting without a build environment.

Privacy

All formatting runs in your browser. No SCSS is uploaded to any server.

How to Use

1. Paste your SCSS into the left panel
2. Click Format SCSS
3. Use Before / After to review changes
4. Click Copy to copy the output

SCSS Beautifier vs Prettier

For team projects, use Prettier + Stylelint in CI. For one-off formatting in the browser, use this tool.