How to use the LESS to CSS Compiler
- Paste your Less code.
- The CSS compiles as you type; errors show the line and an explanation.
- Tick “Minify” for production and copy or download the CSS.
What the compiler handles
This is Less.js, the official Less compiler, running in your browser: @variables, nesting with &, mixins (with arguments and guards), operations like @base * 2, color functions such as darken() and fade(), @media bubbling, escaping and e().
Less vs Sass
Both add variables, nesting and mixins to CSS. Less is written in JavaScript and was used by Bootstrap 3 and many admin themes; Sass (SCSS) is now more common for new projects. Native CSS covers part of the gap today with custom properties and nesting, which modern browsers support.
Imports
Your own @import "variables.less" files can’t be read by the browser, so paste their content above the code that uses them.
Private by design
Compilation runs entirely in your browser — your code is never uploaded, so it’s safe for proprietary projects.
Tools that pair well with the LESS to CSS Compiler
- SCSS to CSS Compiler — Paste SCSS or indented Sass and get plain CSS, compiled by the official Dart Sass engine in your browser — with clear error messages pointing to the exact line.
- CSS Formatter — Turn a minified stylesheet into readable CSS with one property per line and properly nested @media blocks.
- CSS Minifier — Paste a stylesheet to shrink it instantly.
- CSS to Tailwind Converter — Paste CSS rules or declarations and get the equivalent Tailwind utility classes for each selector — including hover: states and arbitrary values like p-[13px].