SCSS Beautifier

SCSS Beautifier – Format Sass Code Online

SCSS is the most popular CSS preprocessor syntax, and well-formatted SCSS is much easier to maintain. The SCSS beautifier formats .scss files with Prettier's SCSS parser, understanding every Sass feature from variables to control directives.

Supported Sass features

• Variables ($brand), default values (!default), and module syntax (@use, @forward, math.div).
• Nested selectors with &, BEM-style &__element and &--modifier.
• Mixins and @include with arguments and content blocks.
• Maps such as $breakpoints: (sm: 600px, md: 900px) — long maps are expanded one key per line.
• Control flow: @if, @else, @each, @for, and @while.
• Interpolation #{...}, placeholder selectors (%placeholder), and @extend.

How to use it

Paste your SCSS, choose indentation and line width, and copy the formatted code. The sample shows a compressed SCSS snippet with a mixin, a map, and an @each loop so you can see how each construct is laid out.

Formatting conventions

The output follows the conventions used by most Sass code bases and stylelint presets: one declaration per line, a space after each colon, nested rules separated from declarations, and closing braces on their own lines. Comments — both /* */ and // — stay exactly where they were.

Indented Sass syntax

This page formats the SCSS (curly-brace) syntax. The older indented .sass syntax, which uses significant whitespace instead of braces, is not supported because whitespace is part of its grammar.

Related tools

After compiling your SCSS, use the CSS Minifier for production or the CSS Validator to check the generated CSS. Prefer LESS? Try the LESS Beautifier. For plain stylesheets, the CSS Beautifier is all you need.