LESS to CSS Converter

You opened an old theme written in LESS, you want to understand one block or lift a couple of rules, and the compiler is not installed. Setting up Node and lessc to read thirty lines is not worth it. The goal here is smaller and faster: strip what is LESS specific syntax and hand back something close to CSS, good enough for reading and eyeballing.

Three text operations, no parser involved. Lines declaring a variable with an at sign and a colon are dropped, double slash comments are removed, and each reference to an at sign variable is rewritten as the equivalent custom property. Notice the loop does not close on its own: since the declarations are gone, the custom properties left in the output are defined nowhere. You have to rebuild the root block with those values by reading the original file.

Treat it as an approximation, never as a build. Nesting and mixin calls pass through unchanged, so the result is not flat CSS yet. Two things need a manual pass on the output: an address inside url containing a double slash gets cut along with the comments, and at rules such as media and import are rewritten by the same substitution. Check those lines. For production CSS use lessc or your bundler plugin. Runs in your browser.