Less to CSS Compiler Online
Compile Less to CSS in your browser. Variables, nesting, mixins and operations are expanded into plain CSS by the official less.js compiler, so you can check the output without installing lessc.
Check the CSS that Less variables, nesting and mixins produce.
Less
CSS
When to use it
- Check the CSS that Less variables, nesting and mixins produce.
- Convert a small Less file for a project that uses plain CSS.
How to use
- Paste Less code or open a .less file.
- Choose the vendor prefix setting for the browsers you target.
- Review the generated CSS, then copy it.
Less input
@primary: #2563eb;
.button {
color: @primary;
&:hover { text-decoration: underline; }
}CSS output
.button {
color: #2563eb;
}
.button:hover {
text-decoration: underline;
}Details and limitations
An undefined variable or an unclosed bracket stops compilation. Start with a short snippet when tracking down an error.
Compilation runs in your browser. An @import of an external URL can make the browser fetch that resource, so prefer self-contained code.
Imports of other local files, Less plugins and project-specific compiler options are not available. Vendor prefixes depend on the target browser setting.
FAQ
Is this the same as compiling with lessc?
It uses less.js, the same compiler that lessc runs, so a self-contained file compiles to the same CSS with default options. Project features such as local imports and plugins are not available here.
Can I compile a file that uses @import?
Imports that point to other files on your computer cannot be resolved in the browser. Paste the imported code inline, or compile the whole project with lessc.
What is the difference between Less and CSS?
Less is a CSS preprocessor. It adds variables, nesting, mixins and functions, and has to be compiled into CSS before a browser can use it.