Beautify SCSS Online — Free SCSS Beautifier
Beautify SCSS/Sass instantly with Prettier. All processing in your browser.
Loading…
SCSS Beautification
Beautify SCSS online.
Features
Format SCSS with variables and nesting preserved.
Beautify SCSS
Format SCSS with variables and nesting preserved.
Basic example
SCSS source
$primary:#333;.btn{padding:0;margin:0}
Beautified SCSS
$primary: #333;
.btn {
padding: 0;
margin: 0;
}
Formatting options
Print width
Wrap lines at 80, 100 or 120 columns.
Adjust tab width, tabs vs spaces, and quote style in the toolbar.
Prettier-powered formatting
Variables like $primary are preserved. For CSS minification see CSS minifier or CSS beautifier.
FAQ — Beautify SCSS
Beautification
SCSS vs CSS?
Use this tool for Sass/SCSS syntax. For plain CSS try the CSS beautifier.
Need to unminify?
Open the SCSS unminifier.
Looking for converters, encoders, formatters, and minifiers in one place? Developer tools hub Open the curated developer tools catalogue.
Other actions for this language
Beautify SCSSUnminify SCSS