Convert LESS to CSS Online
Compile LESS code to plain CSS in your browser. No npm, no Node.js, no setup.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}LESS to CSS Compiler
Why use this LESS compiler?
Zero configuration
No npm, no webpack, no Grunt. Paste your LESS code and get CSS instantly.
Official less.js
Uses the official less.js compiler. Maximum compatibility with the LESS standard.
Full privacy
Your LESS code is never sent to any server. Everything runs in your browser.
Bootstrap 3 projects
Easily compile Bootstrap 3 themes and other LESS-based legacy projects.
How it works
Three steps, no hassle
Paste your LESS code
Write or paste your LESS code into the editor. @ variables, nesting, mixins, and math operations are supported.
Instant compilation
The resulting CSS appears automatically. The LESS.js compiler runs locally in your browser.
Copy or download the CSS
Copy the CSS to the clipboard or download it as a .css file ready to use.
FAQ
Got questions?
LESS (created by Alexis Sellier, alias 'cloudhead', in 2009) and SCSS (part of Sass, created in 2006) are CSS preprocessors with different philosophies. The most visible difference is variable syntax: LESS uses @ (the same prefix as CSS at-rules like @media, which can cause confusion), while SCSS uses $. LESS was designed to be processed both in the browser (via less.js) and on the server — something Sass did not initially plan for. SCSS has a richer ecosystem (Compass, Bootstrap 4+, Angular) and the official Dart Sass compiler. LESS remains relevant mainly due to the legacy project base that used Bootstrap 3 and its native JavaScript compiler (less.js).
LESS variables are defined with @name: value; and used directly: @base-color: #4d90fe; @font: 'Roboto', sans-serif; color: @base-color. A peculiar feature of LESS is lazy evaluation: variables can be used before they are declared in the same scope, since LESS processes the entire file before resolving values. This contrasts with SCSS where variables follow a stricter declaration order. LESS variables can also be interpolated in selectors and property names using the @{name} syntax.
LESS mixins are defined as regular CSS classes and invoked with the same syntax: .mixin() defines the mixin and calling .mixin() inside another rule includes it. There is no @mixin keyword as in SCSS. This means any existing CSS class can be used as a mixin just by calling it. Parameterized mixins use the syntax .mixin(@param: default-value). LESS also supports mixin guards: .mixin(@a) when (@a > 10) { ... } for conditional compilation, a feature SCSS implements with @if.
No. Bootstrap 3 (2013) was LESS's massive adoption moment, making it the preprocessor known to an entire generation of web developers. Bootstrap 4 (2018) migrated fully to SCSS (Sass), and Bootstrap 5 (2021) continued with SCSS. Bootstrap's migration was one of the factors that consolidated SCSS as the dominant preprocessor in the modern ecosystem. If you have a legacy project with Bootstrap 3, this tool can help you extract compiled CSS without maintaining a LESS compilation environment.
The tool compiles the LESS code you provide directly, but cannot resolve references to external files via @import since it operates in the browser without filesystem access. If you have multiple LESS files, you can concatenate them manually before compiling. For projects with complex modular structure, a local compilation environment with less.js or LESS integration in your bundler (webpack, Vite, Parcel) is still required.
LESS is still needed in three main contexts: maintaining legacy projects with Bootstrap 3 or WordPress/Magento/Drupal themes that use LESS; extracting CSS from LESS snippets found in inherited code to migrate it to native CSS or SCSS; and learning LESS syntax to work with or on existing codebases. For new projects, the current recommendation is SCSS/Sass or directly modern CSS with custom properties and @layer.
LESS to CSS online: compile LESS without npm or Node.js, ideal for Bootstrap 3 projects
LESS is a CSS preprocessing language created by Alexis Sellier (known online as 'cloudhead') and published in 2009 as open-source software under the Apache license. Sellier originally wrote it in Ruby, but the rewrite in JavaScript (less.js) in 2010 was the moment that defined its popularity: for the first time, a CSS preprocessor could run directly in the browser by loading the .less file and the less.js library via a <script> tag. This client-side compilation capability — though rarely used in production for performance reasons — democratized access to CSS preprocessing without requiring a build infrastructure. LESS's main features are its direct CSS inheritance (any valid CSS is valid LESS), @ prefix variables (@color: #fff), selector nesting with behavior identical to SCSS, mixins as invocable classes (.mixin()), direct arithmetic on values (margin: @base * 2), and built-in color functions (lighten, darken, mix, etc.).
LESS's greatest impact on the web ecosystem came through Bootstrap, the world's most popular UI framework. Bootstrap 2 (2012) and Bootstrap 3 (August 2013) used LESS as their customization and compilation system, exposing millions of web developers to LESS syntax through the framework's variable and mixin system. Bootstrap 3 themes were distributed as collections of .less files with custom variables that compiled the final CSS. This integration made LESS the best-known preprocessor during the 2013–2018 period, even though SCSS was already technically richer and had greater adoption in the Ruby and Angular developer communities. Bootstrap 4's decision (alpha in 2015, stable release in January 2018) to migrate to SCSS was the definitive turning point: new projects moved to SCSS and LESS became primarily associated with maintaining legacy projects.
The need for an online LESS compiler in 2024 is concentrated mainly in three maintenance and migration scenarios. The first is the Bootstrap 3 legacy ecosystem: although Bootstrap 5 has been available for years, many enterprise applications and WordPress sites still use Bootstrap 3-based themes with LESS customizations. When you need to extract compiled CSS from a specific snippet or verify the output of a variable or mixin, doing it online is faster than maintaining a compilation environment. The second scenario is migrating from LESS to SCSS or modern CSS: understanding what CSS a specific LESS block generates is the first step to rewriting it in SCSS or with native custom properties. The third scenario involves maintaining Magento themes (which use LESS extensively in Magento 2's theme system), certain Drupal themes, and applications built on internal frameworks that adopted LESS during the 2012–2017 period. Convertir.ai runs the official less.js compiler in your browser without sending any line of code to external servers.