LESS Compiler

About the LESS Compiler

The official less.js compiler runs here in the browser, so variables resolve, mixins expand, guards evaluate and colour functions such as fade(), lighten() and mix() produce real values. Namespaced mixins, the & parent reference, @media bubbling out of nested rules and the e() escape helper all behave the way they do in a project build.

The math setting is the option that decides whether an older file compiles at all. LESS 3.0 changed the default so that division needs parentheses, which is why a line copied from a 2.x codebase such as width: 100px / 2 now emits the text unchanged instead of 50px. Parens division, the default here, matches modern LESS. Choosing Always restores the old behaviour and makes legacy sources work, while Strict parens requires parentheses around every operation, not just division. Strict units is a separate guard that rejects nonsense like adding pixels to seconds instead of quietly picking one.

JavaScript evaluation inside backticks is switched off, since arbitrary script in a stylesheet is a security hazard and modern LESS disables it by default too. File imports cannot resolve without a filesystem, so paste dependencies inline. Errors come back with the line, the column and the compiler message. For formatting rather than compiling, use the LESS Beautifier, and CSS to LESS goes the other direction.

How to use

1. Paste LESS on the left, including any variables or mixins the snippet depends on.
2. If a division such as @w / 2 comes out unevaluated, switch Math to Always.
3. Copy the finished stylesheet, or download it as compiled.css for a quick test page.