How to use the less to css converter
- Paste your LESS code into the LESS source box. Comments with
//and/* */are fine. - The compiled CSS appears straight away, one rule per selector, with nested selectors written out in full.
- Read the note under the result. It lists any LESS feature the converter skipped, such as guards or
:extend. - Copy the CSS into your stylesheet, or fix the reported error and compile again.
How to compile LESS to CSS in the browser
LESS is a CSS preprocessor: you write variables, nested rules and reusable mixins, and a compiler turns them into the flat stylesheet browsers understand. This less to css converter does that step without installing Node, the lessc command line or a build plugin. It reads your source, resolves variables and mixins, expands nested selectors and prints standard CSS.
Use it to check what a snippet really produces, to hand a plain stylesheet to someone who does not use LESS, or to compile LESS quickly when you only have a browser. The output follows the same layout as lessc: two-space indentation, one declaration per line, and selector lists split over lines.
LESS features and the CSS they produce
| Feature | LESS input | CSS output |
|---|---|---|
| Variables | @c: #4a90e2; .a { color: @c; } | .a { color: #4a90e2; } |
| Nesting | .nav { ul { margin: 0; } } | .nav ul { margin: 0; } |
| Parent selector | .a { &:hover { color: red; } &-x { top: 0; } } | .a:hover { color: red; } .a-x { top: 0; } |
| Mixin with a default | .pad(@p: 4px) { padding: @p; } .a { .pad(); } .b { .pad(10px); } | .a { padding: 4px; } .b { padding: 10px; } |
| Operations | @w: 10px; .a { width: @w * 2; height: (@w / 4); } | .a { width: 20px; height: 2.5px; } |
| Color function | .a { color: darken(#336699, 10%); } | .a { color: #264c73; } |
| Nested media query | .a { color: blue; @media (min-width: 768px) { color: red; } } | .a { color: blue; } @media (min-width: 768px) { .a { color: red; } } |
What this LESS to CSS converter supports
- Variables:
@name: value;, lazy evaluation (the last definition in a scope wins),@@nameand interpolation such as.@{name},@{prop}-colorand"@{path}/a.png". - Nesting: child rules, comma lists,
&anywhere in a selector, and combinators like>,+and~. - Mixins: class and id mixins, with or without parentheses, default values, named arguments,
@arguments, rest parameters, overloads by argument count and!importanton a call. - Math and units:
+ - * /on numbers, units and colors. Division needs parentheses, as in current LESS. - Functions: darken, lighten, saturate, desaturate, fade, fadein, fadeout, spin, mix, tint, shade, rgb, rgba, percentage, round, ceil, floor, abs, sqrt, pow, mod, min, max, unit and e.
- At-rules:
@mediaand@supports(including nested inside rules),@font-face,@keyframesand@charset.
What is not supported
This is a focused compiler for everyday LESS, not a full copy of the reference implementation. These features are skipped or reported:
- Mixin guards (
when) and pattern-matching parameters. :extend, detached rulesets, maps, plugins and namespaced mixin calls such as#ns > .mixin().- Functions such as contrast, luma, hue, extract, each, if, image-size and data-uri. They pass through unchanged and the note says so.
- The
@importline is dropped, because only the text you paste is compiled. - Comments are not kept in the output.
When a result looks wrong, check the note first. If your project depends on one of these features, compile with the official lessc in your build.
Common LESS compile errors
- Undefined variable. A name like
@colourthat was never declared stops the compile and the message names the variable. - Missing brace. A rule that is not closed is reported as a missing
}, which is the usual cause of a broken last rule. - Self-referencing variable.
@a: @b; @b: @a;loops, so the converter stops with a clear message. - No matching mixin. A call with the wrong number of arguments finds no definition. Check the parameter list and defaults.
- Division without parentheses.
12px / 4is left as written. Write(12px / 4)to get 3px.
For plain CSS you want to tidy rather than compile, use the CSS formatter or the CSS minifier. Working with Sass instead? The SCSS to CSS converter covers that syntax.
Worked examples
| Example | Input | Result |
|---|---|---|
| Variables, mixin and media query | LESS source: @brand: #4a90e2; / @gap: 12px; / .button-base(@bg: @brand) { / padding: @gap (@gap * 2); / background: @bg; / border: 1px solid darken(@bg, 10%); / } / .btn { / .button-base(); / color: white; / &:hover { background: lighten(@brand, 8%); } / &.disabled { opacity: .5; } / @media (min-width: 768px) { / padding: @gap * 2; / } / } / | .btn { / padding: 12px 24px; / background: #4a90e2; / border: 1px solid #2275d7; / color: white; / } / .btn:hover { / background: #6da6e8; / } / .btn.disabled { / opacity: 0.5; / } / @media (min-width: 768px) { / .btn { / padding: 24px; / } / } |
| Nesting and the parent selector | LESS source: .card { / padding: 16px; / .title { font-size: 1.25em; &:hover { color: #c0392b; } } / & + & { margin-top: 8px; } / } / | .card { / padding: 16px; / } / .card .title { / font-size: 1.25em; / } / .card .title:hover { / color: #c0392b; / } / .card + .card { / margin-top: 8px; / } |
| Operations and color functions | LESS source: @base: 8px; / @primary: #336699; / .panel { / margin: @base * 2 @base; / border: 1px solid darken(@primary, 15%); / background: fade(@primary, 20%); / width: percentage((1 / 3)); / } / | .panel { / margin: 16px 8px; / border: 1px solid #204060; / background: rgba(51, 102, 153, 0.2); / width: 33.33333333%; / } |
| Mixin with several parameters | LESS source: .shadow(@x: 0; @y: 2px; @blur: 4px; @c: rgba(0, 0, 0, .3)) { / box-shadow: @x @y @blur @c; / } / .modal { .shadow(0; 8px; 24px); } / | .modal { / box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); / } |
FAQ
How do I convert LESS to CSS?
Paste the LESS source into the box. The compiled CSS appears below it with variables replaced, nested rules expanded and mixins inlined, ready to copy.
Is this a full replacement for lessc?
No. It compiles the common core of LESS and lists what it skips. Guards, extend, plugins and maps need the official compiler.
Why is my division not calculated?
Current LESS only divides inside parentheses. Write (10px / 2) to get 5px, while 12px/1.5 in a font shorthand is left alone.
Can I compile LESS without installing anything?
Yes. Everything runs in your browser, so there is no Node, npm or lessc to set up and your code is never uploaded.
Are LESS comments kept?
No. Both // line comments and block comments are removed from the CSS output.
What happens to @import?
It is dropped, because the converter only sees the text you paste. Paste the imported files above your code to compile them together.
Sources and references
- Less features, lesscss.org: the language features and their CSS output