LESS to CSS Compiler

Bootstrap 3 used LESS. Many legacy enterprise front-end codebases still use it. If you have a LESS file and need the compiled CSS — to inspect it, to migrate away from LESS, or to use the output without a build step — paste it here and get plain CSS instantly.

What LESS Adds Over Plain CSS

LESS (Leaner Style Sheets) extends CSS with variables, nesting, mixins, and operations. Its syntax feels similar to CSS with a few key differences from SCSS.

Variables with @

LESS uses @name for variables (not $ like SCSS):

@primary: #3B82F6;
@border-radius: 8px;
@font-size: 16px;

.btn {
  background: @primary;
  border-radius: @border-radius;
  font-size: @font-size;
}

Compiles to:

.btn {
  background: #3B82F6;
  border-radius: 8px;
  font-size: 16px;
}

Note: @ is the same prefix used for CSS at-rules (@media, @keyframes). LESS distinguishes variable declarations by requiring a colon: @name: value;.

Nesting

Identical to SCSS — nest rules to mirror your HTML hierarchy:

.nav {
  display: flex;
  gap: 16px;

  a {
    color: @primary;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

Compiles to:

.nav { display: flex; gap: 16px; }
.nav a { color: #3B82F6; text-decoration: none; }
.nav a:hover { text-decoration: underline; }

Class Mixins

LESS mixins look like class selectors with parentheses. A mixin defined as .flex-center() is called the same way:

// Define
.flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

// Parameterized mixin
.border(@width; @color) {
  border: @width solid @color;
}

// Use
.hero {
  .flex-center();
  .border(1px; #e5e7eb);
}

Compiles to:

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
}

LESS mixin parameters are separated by semicolons (;) rather than commas to avoid ambiguity with comma-separated CSS values.

Operations

Basic arithmetic works directly in property values:

@base: 8px;

.spacing {
  padding: @base * 2;       // → 16px
  margin: @base + 4px;      // → 12px
  width: 960px / 3;         // → 320px
}

Escape Values

The ~"..." escape syntax passes a literal string through to CSS without processing — useful for old IE filters, vendor-specific syntax, or values LESS would otherwise try to evaluate:

.legacy {
  filter: ~"alpha(opacity=50)";
}

Compiles to:

.legacy {
  filter: alpha(opacity=50);
}

LESS vs SCSS: Key Differences

Common Conversion Patterns

Bootstrap 3 Variables

Bootstrap 3 used LESS extensively. Converting its variable file:

@brand-primary: #337ab7;
@border-radius-base: 4px;
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;

.btn-primary {
  background-color: @brand-primary;
  border-radius: @border-radius-base;
  padding: @padding-base-vertical @padding-base-horizontal;
}

.btn-primary {
  background-color: #337ab7;
  border-radius: 4px;
  padding: 6px 12px;
}

BEM with &

.card {
  border: 1px solid #e5e7eb;

  &__header { font-weight: 600; }
  &__body { padding: 16px; }
  &--featured { border-color: @primary; }
}

.card { border: 1px solid #e5e7eb; }
.card__header { font-weight: 600; }
.card__body { padding: 16px; }
.card--featured { border-color: #3B82F6; }

Unsupported Features

This tool uses a lightweight regex-based converter optimized for the most common LESS patterns. The following require the full LESS compiler:

Guards: Conditional mixins (.mixin() when (@size > 10px)) are detected and skipped with a warning. Move conditional logic to JavaScript or use separate non-guarded rules.

Color functions: darken(), lighten(), mix(), saturate(), and other built-in LESS color functions are passed through unchanged. If your CSS output contains these function calls, use LESS compiler online or install lessc via npm.

@plugin and @import: LESS plugin system and multi-file imports require a file system. This tool converts single-file LESS only.

Loops: LESS’s limited loop support via recursion is not handled.

When to Use This Tool

Good fit:

• Converting isolated LESS snippets or components
• Migrating a simple LESS file to plain CSS
• Inspecting what a LESS snippet compiles to
• Working with Bootstrap 3 variable files

Use lessc or an online LESS playground when:

• Your file uses darken(), lighten(), or other color functions
• You have @import statements joining multiple files
• You use conditional guards

How to Use

1. Paste your LESS code into the left panel
2. CSS output appears automatically on the right (300ms debounce)
3. Click Copy to copy the CSS or Download .css to save it
4. Warnings appear below if unsupported features are detected (like guards)
5. Click Load Sample to see variables, mixins, nesting, and arithmetic in action

No LESS code is uploaded anywhere — conversion runs entirely in your browser.

FAQ

Why does darken(@primary, 10%) appear in my output? Color functions like darken() require the LESS runtime. This converter replaces @primary with its value but does not evaluate darken(). The output will contain darken(#3B82F6, 10%) which is not valid plain CSS. Use a full LESS compiler for stylesheets that depend on color functions.

My mixin disappeared from the output. Is that a bug? Mixin definitions (.name() { ... }) are intentionally removed from the output — they’re replaced where they’re called via .name(). If the mixin call also doesn’t appear, check that the mixin name matches exactly and the definition uses the () syntax.

Can I convert LESS to SCSS instead of CSS? Not directly with this tool — it converts LESS to flat CSS. To migrate LESS to SCSS, convert to CSS first, then use variables and nesting in the SCSS equivalent. The structures are similar enough that the migration is straightforward.

Does this handle @import? No. @import statements are passed through to the output unchanged. This tool processes a single file only — it cannot fetch and inline imported files.