About this tool
A CSS formatter makes compressed or uneven stylesheet code easier to scan. Choose CSS, SCSS, or LESS, then let Prettier restore consistent braces, spacing, indentation, and line breaks. It helps when debugging a minified stylesheet, reviewing a preprocessor file, or cleaning a block copied from browser developer tools.
The stylesheet stays in your browser and is never uploaded or saved after the tab is closed. You can choose tab or space indentation and set a print width before formatting. Because the selected syntax determines how the source is parsed, choosing SCSS or LESS matters when your code includes variables, nesting, mixins, or other preprocessor syntax.
How to use the CSS Formatter
- 1Paste your stylesheet into the CSS source area.
- 2Select CSS, SCSS, or LESS to match the input syntax.
- 3Pick the indentation style and enter a preferred print width.
- 4Format the stylesheet to restore readable spacing and line breaks.
- 5Check nested rules and variables before copying the cleaned code.
Features
Three stylesheet syntaxes
Use the same page for standard CSS plus SCSS and LESS source files.
Minified CSS expansion
Turn compact stylesheet text into a structured layout that is easier to debug.
Preprocessor-aware parsing
Preserve supported nesting, variables, and syntax by selecting SCSS or LESS correctly.
Stylesheet indent choice
Apply tabs or spaces consistently across declarations, blocks, and nested preprocessor rules.
Rule wrapping control
Adjust print width to guide how selectors and longer declarations are laid out.
Frequently asked questions
Does the CSS formatter support SCSS variables and nesting?
Yes. Select SCSS before formatting so Prettier parses SCSS-specific constructs instead of treating the source as plain CSS.
Can I use it to unminify a production stylesheet?
Yes. The formatter adds spacing, indentation, and line breaks to valid minified CSS, SCSS, or LESS.
Why does selecting the correct stylesheet language matter?
Each syntax has different valid constructs. A LESS or SCSS feature may produce a parsing error if the tool is set to standard CSS.
Does formatting change how my CSS looks in the browser?
Formatting is intended to change layout of the source, not the stylesheet's rules. Review the result before replacing production code.
Are private stylesheet files uploaded?
No. Prettier formats them within the current browser tab, and the site does not retain the source afterward.