What the SCSS to Stylus converter does
This SCSS to Stylus converter compiles your SCSS with Dart Sass, which evaluates variables, mixins, loops and module functions, and then writes the result as Stylus in its minimal form. The output has no braces, colons or semicolons; nesting is expressed by 2-space indentation. It is useful when a Stylus project needs styles that were written in Sass, such as a snippet from documentation or a component from another code base.
Example
$brand:#0f766e;
@mixin focus($c:$brand){outline:2px solid $c}
.btn{padding:8px 16px;&:focus-visible{@include focus}&--ghost{background:transparent;border:1px solid $brand}}.btn
padding 8px 16px
&:focus-visible
outline 2px solid #0f766e
.btn--ghost
background transparent
border 1px solid #0f766eIn Stylus you could write the modifier as &--ghost inside .btn, just like in SCSS; the converter keeps it as a separate rule because it is a distinct class in the compiled CSS.
Recreating Sass logic in Stylus
| SCSS | Stylus |
|---|---|
$brand: #0f766e; | brand = #0f766e (or $brand = #0f766e) |
@mixin focus($c) { ... } | focus(c) with an indented body |
@include focus(red); | focus(red) |
@each $k, $v in $map | for k, v in map |
@if $dark { ... } | if dark with an indented body |
#{$name} | {name} |
Stylus supports most Sass concepts, so translating definitions by hand is straightforward once you have the evaluated rules from this converter.
Tidying the converted Stylus
The output is correct but flat, because it mirrors the compiled CSS. A few passes turn it back into idiomatic Stylus:
- Restore variables. Search for repeated literal values such as
#0f766eand replace them with a variable defined at the top, for examplebrand = #0f766e. - Re-nest modifiers. Move rules like
.btn--ghostback under.btnas&--ghost, as described above. - Rebuild mixins. Declarations that appear in several rules, such as a focus outline, can become a mixin again:
focus(c = brand)with an indentedoutline 2px solid c. - Recompile and compare. Run both the original SCSS and the tidied Stylus to CSS and diff the results to confirm nothing changed.
Stylus treats colons, semicolons and braces as optional, so you can keep a more CSS-like style while tidying if your team prefers it.
Limitations
- Variables, mixins and functions are compiled away; the output contains values.
- Partials and
@useof local files cannot be loaded; paste their content. - Rules generated by
@extendmay appear as grouped selectors like.a, .b.
Check computed colors
Colors are one area where the output can look unfamiliar. Legacy functions such as darken() return hex values, but the newer sass:color functions may return colors as rgb() with percentage channels, for example rgb(8.14%, 64.02%, 59.68%). That is valid CSS and Stylus passes it through untouched, but you may want to replace such values with a hex code, or with a Stylus call like lighten(brand, 10%), when you tidy the converted file. Stylus's color functions are close to Sass's legacy ones, so results are similar but not always identical to the last digit.
Test the Stylus with the Stylus Compiler, or produce CSS straight away with SCSS to CSS. The conversion runs in your browser.