About the LESS to CSS Compiler
LESS remains common in projects built on Bootstrap 3, Ant Design and many older component libraries. This tool runs the official less.js compiler in the browser: variables with @, mixins with and without arguments, nested rules and the & parent selector, arithmetic, guards, extend, and the colour and string functions are all supported. Output is expanded or compressed.
Errors are reported with line and column and the compiler's message, for example "variable @accent is undefined". Files referenced with @import cannot be loaded because the tool has no filesystem; paste them inline before the code that uses them, in the order LESS would have read them, since a variable or mixin has to be defined before the rule that calls it. Plugin functions loaded through @plugin are unavailable for the same reason.
One difference from Sass trips up people moving between the two preprocessors. In LESS a mixin is invoked by writing a class or id selector followed by a semicolon, as in .rounded();, and any ruleset defined with a plain class name is also emitted into the compiled CSS unless you declare it with empty parentheses. Seeing a mixin definition appear in the output is normally that, not a compiler bug.
The CSS to LESS tool converts plain CSS into nested LESS, SCSS to CSS is the equivalent compiler for Sass, and CSS Minifier shrinks the compiled result further for production.
How to use
- Paste LESS on the left, including any imported files inline.
- Choose expanded or compressed output.
- Copy or download the CSS.
Common questions
- Which less.js version is used?
- The current less package bundled with this site, which supports the LESS 4 syntax.
- Why does math like 10px / 2 not compute?
- The compiler runs with math set to always, so plain division is evaluated. Wrap it in parentheses if you see it passed through.
- Can it compile Bootstrap 3 source?
- Yes, if you paste the files it imports. The main stylesheet alone will fail on its @import lines.