CSS to LESS Converter

Paste your CSS below and get clean, nested LESS back instantly. Selectors that share a parent are nested, pseudo-classes become &:hover style rules, and colours and font stacks can be pulled out into LESS variables. Everything runs in your browser, so your code never leaves your computer.

Need to go the other way? Use our LESS to CSS Compiler.

About CSS to LESS Converter

Less (Leaner Style Sheets) is a CSS preprocessor that adds variables, nesting, mixins and functions to CSS, making large stylesheets easier to organise and maintain. This converter gives you a head start when moving an existing stylesheet to Less: instead of rewriting it by hand, paste it in and get a nested, variable-driven version back.

Here's a small example of CSS and the LESS this tool produces from it:

.button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
}

.button:hover {
  background-color: #217dbb;
}

.card .title {
  color: #fff;
}

@background_color_1: #3498db;
@color_1: #fff;
@background_color_2: #217dbb;

.button {
  background-color: @background_color_1;
  color: @color_1;
  padding: 10px 20px;

  &:hover {
    background-color: @background_color_2;
  }
}

.card {
  .title {
    color: @color_1;
  }
}

What the converter does

• Nests selectors – rules such as .nav ul li a are placed inside their parents, and rules that share a parent are grouped together.
• Uses the parent selector – :hover, :focus, ::before and other pseudo-classes and pseudo-elements become &:hover style rules inside the element they belong to.
• Extracts variables – colours (hex, rgb, hsl, named colours and colours inside shorthands like border or box-shadow) and font stacks become LESS variables. Identical values reuse the same variable, so you can change a colour in one place. Choose Repeated values only to create variables just for values used more than once.
• Keeps at-rules intact – @media, @supports and @container blocks are nested too, while @font-face, @keyframes and @import are carried over as they are.
• Understands modern CSS – native CSS nesting, custom properties and !important are handled correctly.

Nesting groups rules under their shared parent, which can change the order some rules appear in. If your stylesheet relies on a later rule overriding an earlier one with the same specificity, check the result, or turn off Nest selectors to keep the original order and only extract variables. Comments are removed from the output.