CSS to LESS

CSS to LESS Converter

Every CSS file is already valid LESS, so a "conversion" is really about structure: turning long, repetitive selectors into the nested blocks that make LESS pleasant to maintain. Paste your CSS and the converter groups rules that share a parent selector, moves pseudo-classes into &:hover blocks, and keeps child (>), sibling (+), and general sibling (~) combinators.

Example

.nav ul { list-style: none; }
.nav a:hover { color: red; }

becomes

.nav {
  ul {
    list-style: none;
  }

  a {
    &:hover {
      color: red;
    }
  }
}

How the nesting works

• Rules are grouped by their first compound selector – .nav ul and .nav li both move into .nav.
• Grouping repeats at every level, so deep selectors become deep nesting.
• Selector lists stay together unless every part shares the same parent (.a h1, .a h2 → .a { h1, h2 { } }).
• @media, @supports, @keyframes, and @font-face blocks are preserved, and rules inside media queries are nested independently.
• Comments are kept.

Turn off Nest selectors if you only want the code re-indented.

Next steps in LESS

After converting, introduce variables for repeated values – colors, spacing, breakpoints – and replace repeated declaration groups with mixins. After every conversion the page compiles your input and the result with the real compilers and compares the CSS, so you can see at a glance whether the translation is exact.

A note on order

Grouping moves rules next to related rules. Because CSS specificity is unchanged, this is safe for nearly all stylesheets; if your CSS relies on the source order of two equally specific selectors that target the same element, check that part after converting. To go back to CSS, press the swap button – it compiles the LESS with the official compiler.