About the Stylus to LESS Converter
Stylus infers structure from indentation, so the first job here is working out where each block begins and ends. The parser tracks indentation levels, tolerates tabs and spaces as long as a file sticks to one of them, and copes with the optional punctuation Stylus allows: a declaration written margin 0 auto with no colon is read the same way as the fully punctuated version.
Once the tree exists, printing LESS is mostly a matter of adding characters back. Each block gains braces, each declaration gains a semicolon, and every variable picks up the @ prefix LESS requires. Interpolation written {name} becomes @{name}. Because bare identifiers are ambiguous in Stylus, only names the parser actually saw assigned with = are treated as variables, which stops a keyword such as grid or auto being rewritten by accident.
Mixins map across neatly. A Stylus definition panel(pad = 24px) becomes the LESS ruleset .panel(@pad: 24px) and each bare call becomes a dotted call statement. Guarded assignments written with ?= lose their guard, since LESS has no such operator and instead resolves a variable to the last assignment in its scope. Anything using Stylus iteration or its hash literals is copied through as text for you to rewrite. Compile the finished file with the LESS Compiler before you rely on it.
How to use
- Paste your .styl source into the left pane. Mixed tabs and spaces are the usual cause of a parse error, so normalise them first.
- Choose the indent width for the braced output.
- Convert, then check that every mixin definition picked up a leading dot and a parameter list.
- Download the result as a .less file.
Common questions
- What happens to a ?= assignment?
- The guard is dropped and a plain assignment is written. LESS takes the last definition in a scope, so declaring your defaults before any override usually reproduces the behaviour.
- Can the parser read Stylus written with braces?
- Yes. Stylus allows optional braces, and the file is parsed with the brace aware reader when block openers are detected.
- Why was a value left as a bare word?
- Only identifiers that appear on the left of an equals sign are treated as variables. Anything else is a CSS keyword and is passed through untouched.
- Do LESS and Stylus nest the same way?
- Yes, including the ampersand parent reference and nested media queries, so the structure of the file needs no rearranging.