Stylus to Sass

Stylus to Sass Converter

Like the look of brace-free Stylus but want the Sass ecosystem? The indented Sass syntax is the closest match: no braces, no semicolons, nesting by indentation. This converter moves your Stylus code into .sass format while changing only what must change.

What stays the same

Indentation-based nesting, the parent selector &, media queries, comments, and most built-in functions (rgba(), percentage(), round()) look the same in both languages.

What changes

• Variables get the $ prefix and a colon: gap = 8px → $gap: 8px; ?= becomes !default.
• Declarations need a colon in Sass: padding 8px → padding: 8px.
• Mixins are defined with = and included with +: rounded(r = 8px) → =rounded($r: 8px), rounded() → +rounded.
• Functions become @function with @return.
• Loops: for i in 1..3 → @for $i from 1 through 3; lists → @each.
• Conditions: if / else if / else → @if / @else if / @else; unless x → @if not (x).
• Interpolation: .mt-{i} → .mt-#{$i}.
• Hashes become maps, block mixins (+m() and {block}) become +m with an indented block and @content.
• Selector lines: consecutive selector-only lines merge into one comma-separated list.

Example

gap = 8px
.mt
  for i in 1..2
    &-{i}
      margin-top (i * gap)

$gap: 8px

.mt
  @for $i from 1 through 2
    &-#{$i}
      margin-top: ($i * $gap)

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. Stylus-only features such as property lookup are reported in the notes. Compile with the Sass Compiler, or use Stylus to SCSS for brace syntax. Both outputs describe the same Sass code, so you can switch between them later without losing anything.