SCSS Formatter
Format SCSS with consistent indentation, preserving variables, nesting and mixins.
Input
Output
Ready
Drop a file to load it
About this tool
Reformat SCSS — the brace syntax of Sass, with `$` variables — keeping variables, nesting and comments intact.
When you would use it
- Tidying a SCSS partial
- Normalising indentation across a stylesheet
- Making generated output readable
Worked example
$primary:#333;.a{color:$primary;.b{margin:0}}
$primary: #333;
.a {
color: $primary;
.b {
margin: 0;
}
}
Things worth knowing
- SCSS variables are recognised and preserved rather than being mistaken for declarations.
- Nesting depth is reflected in the indentation, which is what makes preprocessor files readable.
Questions
Frequently asked
Does this compile SCSS to CSS?
No — it formats the source. Mixins, functions and control directives are preserved as written rather than evaluated. Use the SCSS to CSS converter for a syntax translation.
Is my data uploaded anywhere?
No. Every tool on JSONWorks runs entirely in your browser using JavaScript. Your input is never sent to a server, never logged and never stored. The simplest proof is to disconnect from the internet — the tools keep working. The site does load Google Fonts and a Google Analytics page-view tag, so you will see those two requests in your network tab, but neither receives anything you type or paste.
Related