SCSS beautifier - format SCSS in your browser
SCSS is CSS with nesting, variables (`$var`), mixins (`@mixin`), functions and control flow. The beautifier uses Prettier with the scss parser (same as CSS, with the SCSS extensions enabled).
It handles nesting - every `&:hover`, `&::before`, `@include` is formatted with the right indent. Variables (`$primary: #0070f3;`) and `@import`/`@use` at the top stay as you wrote them.
Accepts `.scss`. For the older indented Sass syntax (`.sass`) Prettier does not support that format (it is deprecated). Use `sass-convert` locally for those.
How to use it
- Pick a mode (Gentle / Aggressive / Cosmetic-only) or keep the default.
- Paste your code into the left panel, or use "Upload file".
- Tune settings (gear icon): indent, width, quotes, semicolons.
- Click Format - first click takes a moment (libraries lazy-load).
- On the right you get the output with syntax highlighting - copy, download, or open in new tab.
When this is useful
Five SCSS situations:
- Bootstrap / Bulma fork. You inherited a 2018 design system - all SCSS, unify the format.
- Tailwind-but-actually-SCSS. Some projects have their own mixins → beautify utility-like helpers.
- SCSS / CSS mix. After migrating from plain CSS to SCSS - reformat the whole folder.
- Theme files. Variables + mixin packs for dark/light theme - beautify for consistency.
- Post Find & Replace refactor. After renaming variables the indentation drifted.
Questions and answers
No. Prettier preserves what you wrote. `@import` is deprecated in SCSS 1.80+, but the beautifier does not change it. Migration to `@use`/`@forward` is a job for `stylelint` with `stylelint-scss` rules.