LESS Compiler

LESS Compiler – LESS to CSS Online

Paste LESS code and get plain CSS instantly. The page runs the official LESS 4 compiler (the same less package used by build tools) directly in your browser, so your stylesheets are never uploaded. Choose expanded output for reading or minified output for production, and download the result as a .css file.

What LESS adds to CSS

• Variables – @primary: #d10505; and reuse @primary everywhere.
• Nesting – write .nav { a { … } } instead of repeating selectors; & refers to the parent selector.
• Mixins – reuse groups of declarations with .rounded(8px);, including parameters, defaults, and pattern matching.
• Guards – conditional mixins such as .mixin(@a) when (@a > 10) { … } replace if/else.
• Operations and functions – @gap * 2, fade(@color, 50%), darken(), percentage(), and many more.
• Maps and each() – detached rulesets work as maps (@config[key]) and each() loops over lists.

Compiler settings used

The compiler runs with LESS 4 defaults: math in parens-division mode ((@a / 2) divides, @a / 2 outside parentheses stays a slash, which keeps font: 12px/1.5 working) and inline JavaScript disabled for safety. Errors show the message with the line and column so you can jump straight to the problem.

Imports

Because everything runs in the browser, @import of other local .less files cannot be resolved. Paste the imported code above your styles, or keep plain CSS imports such as Google Fonts – they are passed through to the output.

Convert instead of compile

Moving a project to another preprocessor? Use LESS to SCSS or LESS to Stylus to translate the source code while keeping variables and mixins, or switch this page to CSS → LESS to turn existing CSS into nested LESS.