🔒 Runs in your browser — nothing is uploaded✓ Free, no signup
SCSS Formatter
Paste SCSS to format it with Prettier — consistent indentation for nesting, mixins, variables and media queries.
0 characters
Formatted SCSS
When should you use the SCSS Formatter?
- Cleaning up minified or inconsistently written SCSS
- Matching your team's formatting before a code review
- Reading third-party SCSS more easily
How to use the SCSS Formatter
- 1
Paste SCSS
Paste a stylesheet or snippet.
- 2
Set indentation
Choose 2 or 4 spaces or tabs and a line width.
- 3
Check errors
Syntax errors show the line and column.
- 4
Copy or download
Copy the result or download styles.scss.
Examples
Nested rules
Before
.card{color:$primary;&:hover{color:blue}.title{margin:0}}After
.card {
color: $primary;
&:hover {
color: blue;
}
.title {
margin: 0;
}
}Common errors and how to fix them
CssSyntaxError: Unclosed block- A { has no matching }. Check the line shown in the error.
I need plain CSS- This formats SCSS but doesn't compile it. Use the CSS Minifier's Beautify for plain CSS.
More from Code Formatters & Minifiers
Free tools that run in your browser — no signup, nothing uploaded.
SQL Formatter & Beautifier
Format SQL queries for MySQL, PostgreSQL, SQL Server, SQLite and more.
CSS Minifier & Compressor
Optimize CSS by removing whitespace and comments to accelerate page load time.
JS Minifier & Compressor
Compress JavaScript to improve website speed and performance.
XML Formatter & Validator
Format, validate and minify XML, with errors shown by line and column.
HTML Formatter & Beautifier
Beautify or minify HTML with clean, consistent indentation.
Markdown Editor & Preview
Write Markdown with a live preview and copy the HTML.
HTML to JSX Converter
Convert HTML to valid React JSX — className, style objects and more.
SVG to React Component
Turn SVG markup into a React component with camelCase attributes.
HTML to Markdown Converter
Convert HTML to clean Markdown, including tables and code blocks.
SCSS Formatter FAQ
No — it formats SCSS source code. Compiling needs Sass, which you'd run in your build.
No, only the SCSS syntax (with braces and semicolons), which is what most projects use.
Prettier, so the result matches Prettier in your editor or CI.
Yes, both // and /* */ comments are preserved.
No, property order is kept as written.
No. Everything runs in your browser, so your stylesheet never leaves your device.