Stylus to LESS Converter

What each direction produces

Use this converter as a first-pass syntax formatter for common indented Stylus rules. In the default Stylus → LESS direction, indentation becomes braces, leaf lines such as color #fff become declarations such as color: #fff;, and a basic nested selector stays nested. The output is a readable CSS/LESS-style starting point, not a full translation of Stylus language behavior.

The reverse direction behaves differently: LESS is compiled to ordinary CSS and placed in the Stylus output area. It does not rewrite braces into idiomatic indentation-based Stylus. CSS syntax is accepted by Stylus, but the result should be understood as CSS text.

Formatting is not the same as language conversion

Stylus and LESS both add features beyond CSS, but their variables, mixins, functions, imports and evaluation rules are not interchangeable. For example, a Stylus assignment like brand = #1769aa is emitted as a CSS custom property declaration, --brand: #1769aa;. References to brand elsewhere are not changed to either @brand or var(--brand). That declaration therefore does not automatically preserve the original Stylus variable behavior in a LESS project.

A nested rule such as .button followed by an indented &:hover is retained in a nested block. The target LESS compiler determines the final selector expansion, so inspect compiled CSS when selector details matter.

Start with a small representative sample

Try a selector with ordinary properties and one nested state before converting a larger stylesheet. For example, a Stylus block with color #fff and &:hover should become a braced block with a declaration and nested hover rule. Compare the compiled CSS from the original project and the migrated file; matching visual punctuation in source is not proof of matching behavior.

Where the output needs manual work

• Translate variable declarations and every corresponding reference together.
• Rewrite Stylus mixins, functions, loops, conditionals and complex expressions in valid LESS syntax.
• Review imports and plugin-dependent behavior in the context of your project.
• Check parent selectors, combinators and multi-level nesting after compilation.
• Review comments before relying on converted output: whole-line // comments are omitted.

A practical conversion pass

1. Choose the direction

   Start with Stylus → LESS for an indented source file. Switch direction only when you want LESS compiled into regular CSS.

2. Load a sample or paste a small block

   Use one selector, a few declarations and a nested state. Confirm the input is syntactically sound before interpreting unusual output.

3. Convert and inspect the text

   Copy the result into a temporary stylesheet. Check braces, property separators, variable declarations, comments and nested selectors.

4. Compile and compare

   Use the compiler version and build settings required by your project. Compare generated CSS for selectors and values, then check representative pages.

Questions about the result

Conversion limits

This helper handles common indentation and declaration patterns; it is not a complete Stylus parser or a project migration engine. Functions, mixins, loops, conditionals, imports, plugin syntax, complex expressions and special selector forms can be misread or left untranslated. Keep the original file and treat output as a draft until the target toolchain and page behavior have been checked.