Stylus to SCSS
Convert Stylus to SCSS with $variables and @mixin.
Stylus to SCSS Converter
Stylus is no longer actively developed, and many teams are moving their stylesheets to Sass. This converter turns Stylus into well-formatted SCSS that compiles with Dart Sass, preserving variables, mixins, functions, loops, and conditions.
Translation overview
| Stylus | SCSS |
|---|---|
primary = #d10505 | $primary: #d10505; |
pad ?= 8px | $pad: 8px !default; |
rounded(r = 8px) + body | @mixin rounded($r: 8px) { … } |
rounded() / border-radius 4px (transparent) | @include rounded; / @include border-radius(4px); |
add(a, b) with return a + b | @function add($a, $b) { @return $a + $b; } |
for i in 1..3 / 1...3 | @for $i from 1 through 3 / to 3 |
for x in a b c | @each $x in a b c |
unless cond | @if not (cond) |
+mixin() with block / {block} | @include mixin { … } / @content |
conf = {a: 1px}, conf.a | $conf: (a: 1px);, map-get($conf, a) |
.mt-{i} | .mt-#{$i} |
spin(c, 10) | adjust-hue($c, 10) |
How functions are detected
A Stylus definition is treated as a function when its body uses return or consists of a single expression built from its parameters; otherwise it becomes a mixin. Properties inside a mixin that share the mixin's name (the classic vendor-prefix helper) stay properties instead of becoming recursive calls.
Review points
Property lookup (@prop), partial selector references, and Stylus-only built-ins are listed in the notes. After every conversion the page compiles your input and the result with the real compilers and compares the CSS, so you can see at a glance whether the translation is exact. Expect small color differences if you use darken() or lighten(), because Stylus and Dart Sass use different formulas.
Format the result with the SCSS Beautifier or compile it with the SCSS Compiler.
Frequently Asked Questions
Why migrate from Stylus to SCSS?
Sass is actively maintained, has a much larger ecosystem, and is supported by every major framework and tool. Stylus receives only occasional maintenance releases.
Are Stylus transparent mixins supported?
Yes. A mixin used like a property becomes an @include with the values as arguments, while a property with the same name inside the mixin stays a property.
How are Stylus hashes converted?
Hashes become Sass maps, and dot or bracket lookups such as conf.a or conf[a] become map-get($conf, a).