LESS to CSS Compiler

Paste your LESS below and get compiled CSS back instantly. Variables, mixins, nesting, guards, operations and colour functions such as darken() are all supported, because the code is compiled by the official Less compiler. Everything runs in your browser, so your code never leaves your computer.

Need to go the other way? Use our CSS to LESS Converter.

About LESS to CSS Compiler

Less (Leaner Style Sheets) is a CSS preprocessor: it extends CSS with variables, nesting, mixins, functions and operations, which makes stylesheets easier to organise, reuse and maintain. Browsers only understand plain CSS, so Less has to be compiled before it's used on a website. This tool does that instantly, using the same Less compiler you'd run in a build tool.

Here's a small example of LESS and the CSS it compiles to:

@primary: #17a2b8;
@radius: 5px;

.rounded(@r: @radius) {
  border-radius: @r;
}

.btn {
  color: #fff;
  background: @primary;
  .rounded();

  &:hover {
    background: darken(@primary, 8%);
  }
}

.btn {
  color: #fff;
  background: #17a2b8;
  border-radius: 5px;
}
.btn:hover {
  background: #128294;
}

Features

• Full Less support – variables, nesting, mixins (including guards and default arguments), operations, @import (reference), maps, detached rulesets and built-in functions like darken(), fade() and mix().
• Live compile – the CSS updates as you type. Errors are shown with their line and column, and the last successful result stays visible (dimmed) while you fix them.
• Expanded or minified – choose readable CSS with your preferred indentation, or minified CSS ready for production.
• Less 3 or Less 4 maths – since Less 4, division only happens inside parentheses, e.g. (@gap / 2). Switch Math to Always to compile older code that relies on the Less 3 behaviour.

Imports of other files are resolved relative to this page, so @import statements pointing at files on your own computer won't work here – paste the contents of those files in instead.