SCSS Formatter
FormattersFormat SCSS stylesheets with Prettier. Supports nesting, mixins, @use, @forward, variables, and @each/@for control rules. Configurable indent. 100% browser-based.
About SCSS Formatter
The SCSS Formatter is a Prettier-powered, browser-based tool that instantly reformats SCSS stylesheets into clean, consistently indented output. Using Prettier's postcss parser with the SCSS dialect, it handles the full Sass feature set — nesting, variables (`$`), mixins (`@mixin` / `@include`), `@use`, `@forward`, `@extend`, `@each`, `@for`, `@while`, placeholder selectors, and `@if`/`@else` blocks. Configurable indentation and an 80-column print width produce output consistent with modern Sass project conventions. All formatting runs in a Web Worker; your stylesheets never leave the browser.
Features
- ✓Powered by Prettier's postcss parser with full SCSS dialect support
- ✓Handles SCSS nesting, BEM selectors, and ampersand (&) parent references
- ✓Supports $variables, @mixin/@include, @extend, and placeholder selectors (%)
- ✓Formats @use and @forward (modern Sass module system) correctly
- ✓Handles @each, @for, @while control flow and @if/@else conditionals
- ✓Configurable indentation: 2 spaces, 4 spaces, or tab; print width 80
- ✓Web Worker execution — formatting never blocks the UI
- ✓Syntax-highlighted editor for both input and output
- ✓One-click clipboard copy of formatted output
- ✓Real-time byte-savings stats (input vs output size)
- ✓Language picker — instantly switch to Less, CSS, or 20+ other formatters
- ✓Mobile-responsive layout with a dedicated Format button
- ✓100% client-side — your stylesheets are never uploaded
Common Use Cases
- Normalising SCSS indentation and nesting style before committing to source control
- Formatting auto-generated or third-party SCSS for readability before debugging
- Cleaning up deeply nested BEM component stylesheets
- Standardising @mixin and variable formatting across a team's design system
- Preparing readable SCSS snippets for documentation or code reviews
- Formatting SCSS from CSS frameworks (Bootstrap source, Tailwind plugin files)
Frequently Asked Questions
QWhich Sass features are supported?
All Dart Sass features — including the modern module system (@use, @forward), nesting, mixins, functions, loops (@each, @for), conditionals (@if/@else), and placeholder selectors. The legacy @import syntax is also handled.
QWill this compile SCSS to CSS?
No — this tool formats SCSS syntax for readability. To compile SCSS to CSS, use the SCSS Compiler tool.
QIs my SCSS sent to a server?
No. All formatting runs locally in a Web Worker inside your browser. Your stylesheets never leave your device.