CSS to LESS Converter

LESS already accepts plain CSS, so migrating a stylesheet is rarely about rewriting rules. It is about the variables. A modern file full of --brand and var(--brand) compiles fine, and you end up maintaining two variable systems side by side in the same project. This page does the swap: paste the CSS and the same code comes back with @brand where the custom properties were.

It is a surgical find and replace, not a reformatter. Two rules apply: --name: value; becomes @name: value;, and var(--name) becomes @name. Braces, semicolons, comments and rule order pass through untouched, on purpose, because LESS is a superset of CSS and the file has to stay valid. That also keeps the two panes easy to diff line by line before you save anything.

Two things are left for you. The fallback form, such as var(--gap, 8px), is not matched and comes through unchanged, so pick a value yourself. And if the custom properties lived inside :root, they are converted right there, while a LESS variable declared inside a block only exists inside that block: move the @ declarations to the top of the file. A declaration missing its final semicolon is skipped too. Two text areas, no copy button, converting locally as you type.