How do I format code on this page?
Paste code into the left editor or load a file, choose the options you need, and select Format. Review the result on the right, then copy or save it.
SCSS Formatter beautifies SCSS stylesheets with consistent indentation, spacing, line wrapping, declarations, and nested rule layout. It understands SCSS variables, nesting, mixins, functions, placeholders, interpolation, comments, and control directives.
SCSS syntax is handled separately from plain CSS, including variables, nesting, mixins, interpolation, calculations, and custom properties. Invalid input appears in the output editor so it can be corrected.
Choose tabs or spaces, a preferred line width, and single or double quotes. Processing runs in your browser, so the SCSS source is not uploaded to a server. Use CSS Formatter when the input is compiled CSS and you also need CSS minification.
Paste code into the left editor or load a file, choose the options you need, and select Format. Review the result on the right, then copy or save it.
The input must match the selected language or syntax. Check incomplete statements, unmatched brackets or quotes, and a dialect or mode that does not match the input, then format again.
A code formatter reads language-aware tokens and nested structures, then rewrites indentation, spacing, and line breaks according to a consistent rule set. It does not compile or run the program, so formatting is not a correctness or security check.
Start with 2 spaces and an 80- or 100-column width, then keep the quote style consistent with the surrounding stylesheet. Choose tabs or spaces, a preferred line width, and single or double quotes for SCSS variables, nesting, mixins, functions, interpolation, and comments.