Less Formatter
Format Less stylesheets with this Less Formatter. Paste Less code and the tool lays out variables, nested rules, mixins with parameters, mixin calls, guards, functions and media queries with two space indentation, one declaration per line and consistent spacing after colons and commas. Mixin parameter defaults stay compact, so front end developers get readable Less without running the compiler.
Frequently asked questions
How does the Less Formatter work?
It reads your stylesheet as tokens such as braces, semicolons, colons, strings and comments and rebuilds the layout from them. Every opening brace starts a block indented by two spaces and every declaration gets its own line.
How are variables formatted?
Variable declarations such as @color: #333; get a space after the colon and end with a semicolon. Variable references inside values are kept as written.
How are mixins with parameters handled?
Inside mixin parameter parentheses the colon stays attached, so .mixin(@size:10px) keeps its compact default. Commas between arguments get a single space after them.
Are mixin calls kept on their own lines?
Yes, calls such as .mixin(5px); or .bordered; end with a semicolon and sit on their own line inside the rule. Nested selectors and &:hover rules are indented one level deeper.
Are functions and operations changed?
Functions such as darken(@color, 10%) are kept with a space after each comma, and a plus sign gets a space on each side, so 1px+2px becomes 1px + 2px. Guards such as when (@a > 0) are kept on the selector line.
Does the tool compile or check my Less?
No, it does not compile to CSS or validate syntax, so it also formats unfinished snippets. Use the Less compiler to find errors and produce CSS.
Are comments preserved?
Yes, // line comments are kept and end their line, so the next code starts below them. Block comments are kept where they appear.
Can I adjust indentation?
No, the formatter always uses two spaces and offers no settings. The same stylesheet therefore always produces the same result.
Why is the output fenced as less?
The result is returned as a Markdown code block marked less, which renders highlighted in Markdown. Copy the lines between the fences for your .less file.
How large can my stylesheet be?
Up to 5 MB per run, and larger input is rejected with a message. The output is identical to the Less option of the Code Formatter.