Less to CSS Converter - Compile Less to CSS Online

Less → CSS

About the Less → CSS playground

Less → CSS compiles Less source into plain, browser-ready CSS. It resolves Less variables, evaluates operations, flattens nested rules, and expands mixins so the output is standard CSS with no preprocessor syntax left behind. Paste a Less stylesheet and get compiled CSS you can ship directly or inspect to understand what your Less actually produces.

Less (Leaner Style Sheets) is a CSS preprocessor that adds variables, nesting, mixins, functions, and arithmetic on top of CSS. CSS (Cascading Style Sheets) is the final, flat language browsers understand. This converter runs the Less compiler so its dynamic features are evaluated down to static CSS rules, bridging an authoring-time language with deployable output.

HostedLess → CSS runtime

mainentry file

single fileworkspace

stdinprogram input

How it works

Write

The main file is the entry point for each run.

Give it input

Use the Input panel to pipe standard input to your program when it needs data.

Run

Run sends your code to a fresh hosted runtime and streams the result into the output panel.

Keep or share

Your draft stays in this browser, and Share creates a separate snapshot link.

External resources

lesscss.org— Official website

Input (Less)

@brand: #3366ff;
.card {
  color: @brand;
  .title { font-weight: bold; }
}

Output (CSS)

.card {
  color: #3366ff;
}
.card .title {
  font-weight: bold;
}

Input (Less mixin)

.rounded(@r: 4px) { border-radius: @r; }
.box { .rounded(8px); }

Output (CSS)

.box {
  border-radius: 8px;
}

Input (Less parent ref)

a {
  color: blue;
  &:hover { color: navy; }
}

Output (CSS)

a {
  color: blue;
}
a:hover {
  color: navy;
}

Input (Less math)

@base: 16px;
.title {
  font-size: @base * 2;
  margin: (@base / 2);
}

Output (CSS)

.title {
  font-size: 32px;
  margin: 8px;
}

Input (Less nested + variable)

@pad: 12px;
.panel {
  padding: @pad;
  .header { padding-bottom: @pad; }
}

Output (CSS)

.panel {
  padding: 12px;
}
.panel .header {
  padding-bottom: 12px;
}

Input (Less color function)

@brand: #3366ff;
.btn {
  background: @brand;
  border-color: darken(@brand, 10%);
}

Output (CSS)

.btn {
  background: #3366ff;
  border-color: #0f4ae3;
}

Input (Less escaping)

@w: 100px;
.col {
  width: ~"calc(100% - @{w})";
}

Output (CSS)

.col {
  width: calc(100% - 100px);
}

less

css

Output

Compiled CSS output

Less → CSS Converter

Write

Give it input

Run

Keep or share

Editing

Navigation

Selection