SCSS Formatter & Minifier
Beautify SCSS (Sass) with Prettier, or minify it. This tool beautifies and minifies SCSS on one page — paste your code, pick a mode, and click. Everything runs on your device, nothing is sent to a server.
Everything runs in your browser. Your code is never sent to our servers.
Example
Example Input
.a{.b{color:red}}Example Output
.a {
.b {
color: red;
}
}How to Use
- 1Choose Format or Minify mode at the top.
- 2Paste your SCSS code into the Input field.
- 3If needed, set the indent width in "More settings".
- 4Click the button (or press Ctrl+Enter) to process. The result appears in the Output field.
- 5Click Copy to copy the result.
About the SCSS Formatter
The SCSS Formatter beautifies SCSS (Sass syntax) code using Prettier, keeping nesting, variables, and mixins readable, or compacts it for production.
How it works: Format uses Prettier's SCSS parser which understands Sass features like nesting and the & selector. Minify removes whitespace and comments for a small size.
Clean SCSS matters in teams because deep nesting easily gets messy. This tool keeps a consistent style across a project.
FAQ
Can this SCSS tool both format and minify?
Yes. One page with a toggle — Format mode prettifies (beautifies) with indentation, and Minify mode compacts it. No need for two separate pages.
Is my code sent to a server?
No. SCSS is processed entirely in your browser using JavaScript/WebAssembly. Your code never leaves your device.