Skip to content

Less to CSS Compiler

Compile Less to CSS in your browser: variables, mixins, guards, operations and colour functions, readable or minified.

Runs in your browserLess → CSS
Loading tool…

Example

Input
@c: #333;
.nav {
  ul { margin: 0; }
  a { color: @c; &:hover { color: red; } }
}
Output
.nav ul {
  margin: 0;
}
.nav a {
  color: #333;
}
.nav a:hover {
  color: red;
}

How to use the Less to CSS Compiler

  1. Paste Less code and press Convert. Choose "Compressed" for minified output.

Privacy and limitations

  • Your data is processed on your device and is not uploaded to any server.
  • @import of other .less files can't be resolved because there is no file system; paste the imported code inline. Plain CSS imports are passed through.
  • Inline JavaScript (backtick expressions) and @plugin are disabled for security.
  • Division needs parentheses, e.g. (10px / 2), as in the Less 4 default math mode.

Related converters

SCSS to CSS CompilerCompile SCSS or indented Sass to plain CSS in your browser with the official Dart Sass compiler, expanded or minified.Less FormatterFormat Less stylesheets with Prettier, keeping variables, mixins and nested rules readable.CSS MinifierMinify CSS by stripping comments and whitespace and dropping redundant semicolons, without touching strings or URLs.CSS Specificity CalculatorCalculate the specificity (A,B,C) of CSS selectors, including :is(), :not(), :has() and :where(), and see which wins.CSS to JS Object ConverterConvert CSS declarations or rules into camelCase JavaScript style objects for React, CSS-in-JS or JSON.CSS Border Radius GeneratorSet each corner radius in px, % or rem with a live preview and get the shortest border-radius shorthand.CSS Box Shadow GeneratorBuild layered CSS box-shadow values visually with offset, blur, spread, colour, opacity and inset controls.CSS Gradient GeneratorDesign linear, radial and conic CSS gradients with up to five colour stops, a live preview and copy-ready CSS.

Browse all css tools →