LESS to CSS Converter

Q: What happens to LESS variables and mixins?

They are resolved at compile time: every use of @gap is replaced with its value and mixin calls are expanded into the rules that use them.

Convert LESS to plain CSS, or to SCSS, SASS and Stylus, in your browser.

Operation

Input

Output

What you can do here

LESS to CSS: variables, nested rules, mixins and operations compiled to plain CSS
LESS compiler: the official less.js 4 compiler, running in your browser
LESS to SCSS, SASS and Stylus
Beautify, minify and validate CSS from the same menu

How LESS to CSS conversion works here

Choose LESS to CSS and paste your stylesheet. It is compiled by less.js, the same compiler behind lessc, so @brand: #4f46e5; and .btn { color: darken(@brand, 10%); &:hover { color: @brand; } } come out as ordinary CSS rules. The compiler is loaded on demand and runs in your browser, so nesting, mixins, functions and math are resolved to plain CSS. @import of other files cannot be followed, because only the pasted code is available.

Common questions

Is this a real LESS compiler?

Yes. It runs less.js 4, the official LESS compiler, in your browser. The only limit is @import of other files, which it cannot fetch.

What happens to LESS variables and mixins?

They are resolved at compile time: every use of @gap is replaced with its value and mixin calls are expanded into the rules that use them.

Is my stylesheet uploaded?

No. Conversion runs in your browser.