Sass to Stylus
Convert indented Sass to Stylus syntax.
Sass to Stylus Converter
The indented Sass syntax and Stylus look alike at first glance – both use indentation instead of braces – but the details differ: how variables are assigned, how mixins are called, and how loops are written. This converter takes care of those details.
Differences handled
| Indented Sass | Stylus |
|---|---|
$gap: 8px | $gap = 8px |
$gap: 8px !default | $gap ?= 8px |
color: red | color red |
=m($a: 1px) | m($a = 1px) |
+m(2px) | m(2px) |
+m with an indented block | +m() with {block} in the mixin |
@for $i from 1 through 3 | for $i in 1..3 |
@each $n in 1, 2 | for $n in 1 2 |
@if $a == 1 / @else | if $a == 1 / else |
.w-#{$n} | .w-{'' + $n} |
%base / @extend %base | $base / @extend $base |
Why the extra '' + in selectors?
Stylus removes units when a bare number is interpolated into a selector – .w-{$n} with 10px would produce .w-10. Concatenating with an empty string keeps the unit, so the selector matches what Sass generates.
Not available in Stylus
@use, @forward, and @while have no Stylus counterpart; they are commented out and listed in the notes. Sass functions become Stylus functions with return, and maps become Stylus hashes.
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. Color functions are the usual source of tiny differences, because Stylus and Dart Sass calculate darken() and lighten() differently.
Experiment with the output in the Stylus Compiler.
Frequently Asked Questions
Is indented Sass valid Stylus?
Not quite. Stylus also uses indentation, but it assigns variables with =, calls mixins like functions, and writes loops as for … in. The converter rewrites those parts.
What happens to @while loops?
Stylus has no while loop, so @while blocks are commented out and reported. Rewrite them with a for loop over a range.
Are Sass maps supported in Stylus?
Yes, as hashes. A map like (a: 1px) becomes {a: 1px} and map-get($m, a) becomes $m.a.