What the Stylus to SASS converter does
If you like Stylus's brace-free look but want the Sass ecosystem, Sass's indented syntax is the natural destination: it also uses indentation instead of braces. This Stylus to SASS converter compiles your Stylus with the built-in Stylus compiler, then writes the result as .sass with 2-space indentation and property: value lines. The main visible change is that every property gains a colon, which Sass requires. Blank lines between top-level rules are added for readability, and 2 spaces per level are used regardless of the indentation in your Stylus source.
Example
brand = #0f766e
border-radius(r = 4px)
-webkit-border-radius r
border-radius r
.card
border-radius(6px)
color brand
&:hover
background rgba(brand, 0.1).card
-webkit-border-radius: 6px
border-radius: 6px
color: #0f766e
&:hover
background: rgba(15,118,110,0.1)The layout is nearly identical, which makes reviewing the conversion easy. Variables and the mixin are resolved to values.
Stylus habits that differ in indented Sass
- Colons are mandatory after property names in Sass.
- Variables need a
$:brand = #0f766ebecomes$brand: #0f766e. - Mixins are explicit: define with
=name($arg)or@mixin, call with+nameor@include. Stylus's transparent mixins (a mixin called like a property) have no Sass equivalent. - Interpolation changes from
{name}to#{$name}. - Property lookup such as
@widthdoes not exist in Sass; use a variable instead.
Limitations
- Conditionals, loops, functions with return values, built-in color functions and
@extendare not supported by the Stylus compiler used here. - Output contains values; recreate variables and mixins to keep your stylesheet maintainable.
- Multi-line comments are joined onto one line in the indented syntax.
Reviewing the conversion
Since both files are indentation-based, the easiest review is to put the Stylus and the Sass output side by side: selectors should line up level for level. Differences you should expect are colons after properties, evaluated arithmetic (gap * 2 becomes 16px), expanded mixins, and &.modifier blocks that come out as compound selectors at the top level. Anything else, such as a missing rule, usually points to an unsupported feature like an if block or @extend in the input. The Diff Checker helps compare the CSS each version compiles to.
Check the result with the SASS Compiler. If your team prefers braces, use Stylus to SCSS instead. The conversion runs in your browser.
Rewriting Stylus logic in Sass
Loops and conditionals have to be ported by hand. The syntax maps closely, but watch the range operators, which are a classic off-by-one trap:
| Stylus | Indented Sass |
|---|---|
for i in 1..3 (includes 3) | @for $i from 1 through 3 |
for i in 1...3 (excludes 3) | @for $i from 1 to 3 |
for key, value in colors | @each $key, $value in $colors |
if dark / else | @if $dark / @else |
double(n) whose last line is n * 2 | @function double($n) with @return $n * 2 |
.item-{i} | .item-#{$i} |
After porting, compile both versions and compare the CSS: a loop that produces one class too many or too few is the most likely difference.