What the LESS to Stylus converter does
This LESS to Stylus converter compiles your LESS with less.js, then prints the result in Stylus's most compact form: selectors on their own line, properties indented beneath them as property value, and nothing else. It is a quick way to move component styles from a LESS theme into a Stylus-based project, or simply to see how the same styles look with minimal syntax.
Example
@brand:#0f766e;@gap:8px;
.card{padding:(@gap*2);border:1px solid @brand;.title{font-weight:600}&:hover{border-color:darken(@brand,10%)}@media (min-width:768px){padding:(@gap*3)}}.card
padding 16px
border 1px solid #0f766e
.title
font-weight 600
&:hover
border-color #094944
@media (min-width: 768px)
.card
padding 24pxAll LESS expressions are evaluated. The nesting is rebuilt from the compiled selectors, so .card .title and .card:hover end up inside .card again.
LESS and Stylus side by side
| Feature | LESS | Stylus |
|---|---|---|
| Variable | @gap: 8px; | gap = 8px or $gap = 8px |
| Mixin | .pad(@x) { padding: @x; } | pad(x) with an indented padding x |
| Mixin call | .pad(4px); | pad(4px), or pad 4px as a transparent mixin |
| Interpolation | .@{name} | .{name} |
| Color function | darken(@c, 10%) | darken(c, 10%) |
The converter outputs values, not these constructs, so re-introduce variables and mixins by hand where they help. Stylus has a very similar set of built-in color functions, which makes this part of a migration straightforward.
Limitations
- Imported LESS files are not available; paste their content first.
- Multi-line comments are kept as
/* */blocks, and empty rules get a// emptyline. - Compound selectors (
.btn.active) remain separate rules.
How the Stylus nesting is rebuilt
After compiling, the converter looks at each CSS selector and splits it at the first combinator: .card .title becomes .title nested in .card, and .card:hover becomes &:hover. Rules that share a parent are merged into one block, in the order they first appear. When a parent has no declarations of its own and only one child, the two are collapsed back into a single selector such as nav a, so you never get empty wrapper blocks. Selector lists like h1, h2 and at-rules like @keyframes are kept as written. The result reads like hand-written Stylus while producing the same CSS as the original LESS.
Preview the Stylus result with the Stylus Compiler, or produce plain CSS directly with LESS to CSS. Everything runs locally in your browser.
A practical migration workflow
- Include shared variables. Paste the contents of your variables and mixins file above the component styles, since imports cannot be resolved here.
- Convert one component at a time. Small files are easier to review than a whole theme.
- Bring variables back. Look for colors and sizes that repeat in the output and replace them with Stylus variables such as
$brand = #0f766e. - Prove nothing changed. Compile the Stylus with the Stylus Compiler, compile the original with LESS to CSS, and compare the two stylesheets in the diff checker.
Escaped LESS strings such as ~"calc(100% - 10px)" are already resolved in the output, so they need no special handling in Stylus.