About the LESS to Stylus Converter
Stylus takes the opposite approach to LESS on punctuation. Where LESS marks a variable with @ and closes every block with a brace, Stylus writes brand = #f25f1e and lets indentation define the block. This converter reads the LESS structure, renames each variable to its bare form, and reprints the whole tree without braces or semicolons.
Mixins translate cleanly in this direction. LESS already calls a mixin by naming it, and Stylus does the same, so .panel(20px); becomes panel(20px) and the definition loses its leading dot. Default parameter values keep the = spelling Stylus uses, which happens to match the LESS colon form closely enough that most signatures survive untouched. Argument lists that LESS separated with semicolons are rewritten with commas.
Escaped values are the notable win here. LESS writes raw output as ~"calc(100% - 10px)", and the converter turns that into the unquote() call that both Sass and Stylus understand. Guards written with when do not survive as logic and must be rebuilt with a Stylus if block, and LESS detached rulesets have no direct counterpart. Because Stylus allows the colon between property and value to be dropped, a checkbox controls whether you get the compact form or the familiar one. Feed the output into the Stylus Compiler to see the CSS it produces.
How to use
- Paste your LESS or upload a .less file.
- Decide whether to keep colons. Compact Stylus omits them; keeping them makes the file easier to skim.
- Convert and check the mixin calls, which lose their leading dot in Stylus.
- Download the result with a .styl extension.
Common questions
- Does Stylus need a sigil in front of variables?
- No. A bare name followed by an equals sign declares a variable, and the same bare name in a value reads it back. Dollar prefixed names are also accepted for readability.
- How are LESS escaped strings converted?
- A value written as ~"..." becomes unquote("..."), which Stylus resolves the same way, so calc expressions and custom property fallbacks keep working.
- Are LESS mixin guards supported?
- They are copied through as text. Rewrite each one as an if block inside the mixin body, since Stylus evaluates conditions with its own syntax.
- Will indentation errors break the build?
- They can. Stylus infers blocks from indentation, so mixing tabs and spaces in one file is the most common cause of a confusing compile error.