CSS to LESS Converter

What the CSS to LESS converter does

Every CSS file is already valid LESS, so a CSS to LESS conversion is really about structure. This converter parses your stylesheet and groups rules that start with the same selector. .btn .icon moves inside .btn, .btn:focus-visible becomes a nested &:focus-visible, and the output uses LESS's brace syntax with 2-space indentation. Declarations, values and comments are kept exactly as they were.

Example

.btn{padding:8px}.btn.primary{background:#0f766e}.btn:focus-visible{outline:2px solid}.btn .icon{width:16px}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.btn {
  padding: 8px;
  &:focus-visible {
    outline: 2px solid;
  }
  .icon {
    width: 16px;
  }
}

.btn.primary {
  background: #0f766e;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

The descendant .icon and the pseudo-class were nested. The compound selector .btn.primary was left as its own rule, because it is one element with two classes rather than a child of .btn; you can nest it as &.primary by hand if you prefer. @keyframes blocks are copied without nesting.

How the nesting is decided

For each rule, the converter splits the selector at its first combinator. The part before it (the first compound selector, such as .btn) becomes the parent, and the rest (.icon, > li or + .note) becomes a nested child. A selector without a combinator is split at its pseudo-class, so a:hover becomes &:hover inside a. Rules with the same parent are merged into one block, and a parent that ends up with a single child and no declarations of its own is collapsed back into one selector, so you never get empty wrapper blocks.

Making the most of LESS after converting

The converter does not invent variables or mixins; it cannot know which repeated values are meant to stay in sync. Good next steps are:

• Replace repeated colors and sizes with variables: @brand: #0f766e; then background: @brand;.
• Turn repeated declaration groups into mixins. In LESS any class can be reused as a mixin, so .btn(); inside another rule copies its declarations.
• Use &:extend(.btn); when you want to share a selector instead of copying declarations.
• Keep nesting to two or three levels so the compiled selectors stay short.

Things to check

• Selector lists such as h1, h2 stay together as one rule and are not split.
• Rules inside @media are nested within the media block, which stays at the top level; LESS also lets you move the media query inside the selector if you prefer that style.
• Invalid CSS, like a missing }, stops the conversion with an error, so validate first with the CSS Validator if needed.

Prefer Sass? Use CSS to SCSS instead. To tidy the resulting file later, run it through the LESS Formatter. Conversion runs locally in your browser.