SCSS Formatter

SCSS Formatter & Beautifier

What it does

This tool formats and beautifies SCSS (Sassy CSS) code using Prettier. Paste minified, compressed, or poorly-indented SCSS and get back consistently formatted code with proper indentation, spacing, and line breaks.

Use cases

Use this formatter when reviewing minified SCSS from third-party libraries, cleaning up auto-generated styles, enforcing consistent indentation in a project, or preparing SCSS code for code review. It handles variables, nesting, mixins, extends, and all standard SCSS syntax.

Example

Minified SCSS input:

$c:#667eea;.container{max-width:800px;margin:0 auto;&:hover{background:rgba(255,255,255,.15)}}

Formatted SCSS output:

$c: #667eea;
.container {
  max-width: 800px;
  margin: 0 auto;
  &:hover {
    background: rgba(255, 255, 255, 0.15);
  }
}

Pitfalls

Prettier formats SCSS according to its own opinionated style, which may differ slightly from other formatters like Stylelint. It will not compile or validate SCSS logic — invalid variable references or mixin calls will still format but will fail when compiled by Sass.

VS Code integration

To automatically format SCSS on save in VS Code, install the Prettier extension and add "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } to your settings.json. You can also configure indentation and other options in a .prettierrc file at the root of your project.