About the LESS Beautifier
LESS files tend to drift in style faster than plain CSS because mixin calls, guards and detached rulesets all look like ordinary declarations at a glance. Running the file through this beautifier gives it one shape: a declaration per line, consistent indentation for every nesting level, selector lists split at the commas, and a blank line between top level rules so the boundaries are obvious.
Everything specific to LESS survives the pass. Variables written with @name, parametric mixins with default arguments, mixin calls with and without parentheses, guards such as when (lightness(@c) > 50%), escaped values in ~"...", and the @import (reference) option keep their exact text. Because only whitespace moves, the compiled stylesheet is identical afterwards.
One thing to watch is the at sign. LESS uses it for variables while CSS uses it for at-rules, so a line like @media and a line like @screen-md: 720px begin the same way. The formatter treats both correctly, but a variable name that collides with an at-rule keyword will confuse readers even when it compiles, so rename it while you are here. The input is structure checked first, and unbalanced braces or an unterminated comment stop the run with a line number. Compile the tidied file with the LESS Compiler.
How to use
- Paste LESS into the left pane or drop a .less file onto it.
- Choose an indent, and turn off Blank line between rules if you prefer a denser file.
- Copy the result or download it as formatted.less.
Common questions
- Does the formatter resolve mixins or variables?
- No. It only changes whitespace. Use the LESS Compiler when you want the values resolved into plain CSS.
- Are guards and detached rulesets safe?
- Yes. Guard conditions and detached rulesets are treated as ordinary blocks, so their text is preserved exactly.
- What happens to escaped strings like ~"calc(100% - @w)"?
- They are left alone. The formatter never edits inside a string, so the escape stays intact.
- Can I format a Bootstrap 3 LESS source file?
- Yes. Large vendor files format fine, although import statements are not followed because there is no filesystem in the browser.