SCSS / Less Formatter Online
Beautify or minify SCSS and Less stylesheets instantly in your browser.
What Is a SCSS / Less Formatter?
A SCSS / Less Formatter is a free online tool that cleans up and restructures CSS preprocessor code. In Beautify mode it adds consistent indentation to nested rules, aligns declarations, and makes complex stylesheets easy to navigate. In Minify mode it strips all whitespace and comments to produce the smallest possible output. The formatter handles SCSS syntax (variables with $, @mixin, @include, & nesting) and Less syntax (variables with @, parametric mixins, nesting).
How to Use SCSS / Less Formatter
- Select SCSS or Less depending on your code syntax.
- Choose Beautify to format with indentation, or Minify to compress.
- Select your preferred indent size: 2 or 4 spaces.
- Paste your code into the input panel, or click Load Sample to try an example.
- The formatted output appears instantly. Click Copy to copy it.
Features
- Supports both SCSS and Less syntax
- Beautify mode with 2-space or 4-space indentation
- Minify mode strips whitespace and comments
- Handles nested rules, variables, mixins, and
&selectors - Copy result to clipboard in one click
- Runs entirely in your browser — zero data uploaded
FAQ
What is a SCSS / Less Formatter?
A SCSS / Less Formatter is a free online tool that takes unformatted or minified SCSS or Less code and reformats it with consistent indentation, making nested rules and declarations easy to read.
What is the difference between SCSS and Less?
Both are CSS preprocessors that add variables, nesting, and mixins. SCSS uses $ for variables and is a superset of CSS. Less uses @ for variables and has a slightly different mixin syntax.
Is my code sent to a server?
No. All formatting happens entirely in your browser. Your code never leaves your device.
What does minify do to SCSS or Less?
Minify removes all whitespace, comments, and unnecessary characters to produce the smallest possible output, useful for reducing file size before compilation.