LESS to CSS Converter: Compile Variables and Nesting Without less.js
LESS was one of the first CSS preprocessors and is still used in many Bootstrap 3 projects and older codebases. This converter substitutes @variables and flattens nested selectors into plain CSS — useful for inspecting what a LESS file produces or migrating away from LESS without setting up a compiler.
The @ variable prefix is what distinguishes LESS from SCSS ($). Otherwise nesting and variable substitution work identically.
LESS vs SCSS Variables
LESS uses @ as the variable prefix, which creates an ambiguity with CSS at-rules (@media, @keyframes, @charset). The LESS compiler handles this disambiguation by context — a variable declaration is @name: value while an at-rule always starts with a keyword. This converter resolves the same ambiguity: @name: value is collected as a variable, not treated as an at-rule.
Nesting and Parent Reference
LESS nesting works identically to SCSS nesting. The & symbol is the parent selector reference, enabling patterns like .btn { &-primary {} } → .btn-primary {} and .btn { &:hover {} } → .btn:hover {}. The flattener processes any nesting depth and any @media block structure.
Migrating from LESS to CSS or SCSS
If you are migrating a LESS codebase to plain CSS: paste the LESS file here, copy the output, and use it as your .css file. If you are migrating to SCSS: change @ variable prefixes to $ and rename the file to .scss. The nesting syntax is identical between LESS and SCSS for the common patterns this tool handles.
Practical Examples
Extracting CSS from a Bootstrap 3 LESS Component
Bootstrap 3 was built with LESS. Compile a component partial to standalone CSS.
- 1.Copy the LESS partial file for the component you need
- 2.Paste it here — @variables and nesting will be resolved
- 3.Copy the CSS output
- 4.Use it as a standalone stylesheet without the Bootstrap build pipeline
What Gets Compiled
- @variable declarations → substituted throughout, then removed
- Nested selectors → flattened with parent selector prepended
- & parent reference → replaced with full parent selector
- @media/@supports blocks → contents flattened with same parent
Good Use Cases
- Compiling a LESS snippet without installing less.js
- Migrating a LESS file to plain CSS or SCSS
- Inspecting what CSS a Bootstrap 3 LESS component produces
- Extracting usable CSS from a legacy LESS codebase
Frequently Asked Questions
What LESS features are supported?
@variable declaration and substitution, nested selectors including the & parent reference, and @media blocks containing nested rules. Mixins, operations, functions, and @import are not supported.
How is LESS different from SCSS?
LESS uses @ for variables (which clashes with CSS at-rules like @media), while SCSS uses $. LESS is compiled by the less.js library rather than Dart Sass. Functionally for variables and nesting, they are very similar — the main difference is the variable prefix character.
Are LESS operations evaluated?
No. Math operations like @base-size * 1.25 are left as-is in the output. Only the variable reference itself is substituted — the arithmetic is not evaluated. Use a full LESS compiler for expressions.
What happens to LESS mixins?
LESS mixins (.mixin() { ... }) are not expanded. They appear as regular class selectors in the output. Only @variable substitution and selector nesting are processed.