Stylus to SASS Converter Online

Translate Stylus to the indented SASS syntax — both indent-based, $ variables normalised, colons added. 100% in your browser.

Input Stylus

SASS Output

What is a Stylus to SASS Converter?

A Stylus to SASS converter translates a .styl file into the indented Sass syntax (.sass extension). Both languages skip braces and semicolons in favour of meaningful indentation, so this is the smallest possible change between preprocessors. The converter only needs to normalise variables ($name = value becomes $name: value) and ensure every declaration has a colon.

If your team prefers indentation-based syntax but Stylus has stagnated for your project, the indented SASS dialect is the natural destination — same visual structure, but powered by the maintained Dart Sass compiler.

How to convert Stylus to SASS — 4 steps

Paste your Stylus. Drop a .styl file into the Input panel, or click Load Sample to try a starter.
Click Convert. The tool keeps indentation, normalises every variable to $name: value, and inserts colons.
Review the SASS. Confirm variables, selectors, and pseudo-classes look right. Mixins need a manual =/+ or @mixin/@include pass.
Save as .sass. Use the .sass extension (not .scss) so Dart Sass picks the indented parser. Compile with sass input.sass output.css.

Sample Stylus in, SASS out

Input — Stylus

$primary = #66ccff
$padding = 12px

.nav
  display: flex
  align-items: center
  padding: $padding 24px
  background: #1a1a1a

.nav a
  color: #fff
  margin-right: 16px

.nav a:hover
  color: $primary

Output — SASS (indented)

$primary: #66ccff
$padding: 12px

.nav
  display: flex
  align-items: center
  padding: $padding 24px
  background: #1a1a1a

.nav a
  color: #fff
  margin-right: 16px

.nav a:hover
  color: $primary

Both Indent-Based

Stylus and indented SASS share the same structural model. The converter only adjusts variables and colons — indentation carries over directly.

Dart Sass Compatible

Output is standard indented SASS that compiles with Dart Sass, sass-loader, and the Vite SASS plugin. No legacy node-sass dependency.

Client-Side Only

Translation runs in JavaScript inside your browser. .styl source never leaves your machine.

Common use cases

check_circleMigrating a Stylus codebase to a maintained preprocessor without losing the indented look
check_circleStandardising on Sass while keeping the visual feel of indented Stylus
check_circlePorting Vue components from Stylus to SASS for Vite Sass integration
check_circleConverting design tokens from .styl to .sass without learning braces
check_circleProducing .sass partials from existing .styl component files
check_circleBootstrapping a Sass-based design system from Stylus source
check_circleMoving from Stylus to SASS while preserving Pug-style aesthetics
check_circleSide-by-side compare indented SASS vs Stylus on a real component

SASS vs SCSS vs Stylus — pick your indentation

Indented SASS and Stylus are visually almost identical — both rely on whitespace for structure. SCSS uses braces and semicolons (more familiar to plain-CSS developers). Stylus is the most permissive (even colons are optional), but its ecosystem has shrunk. SASS sits in the sweet spot for indentation devotees: maintained, supported by every modern build tool, and visually similar to Stylus. If you want braces and the broadest tooling, see Stylus to SCSS instead.

Need to go further?

Convert between every CSS preprocessor — all browser-side.

Stylus to SCSS SCSS to SASS SASS to CSS

Frequently Asked Questions

Are Stylus and SASS really that similar?

Yes — structurally. Both use indentation instead of braces, both omit semicolons. The key differences: SASS requires a colon between property and value (Stylus makes it optional), and SASS requires the $ sigil on every variable (Stylus does not). The converter handles those two normalisations.

What is "SASS" vs "SCSS"?

They are two syntaxes for the same Sass language. SASS (.sass extension) is the original indented syntax, no braces or semicolons. SCSS (.scss extension) is the newer brace-and-semicolon syntax compatible with plain CSS. Both compile with the same Dart Sass binary; you choose by file extension.

Why convert Stylus to SASS instead of SCSS?

If your team values the indentation aesthetic of Stylus and you want to stay on a maintained preprocessor, SASS is the closest match — both are indent-based. SCSS requires a more visible syntax change (adding braces) and may feel like a step backwards for indentation devotees. Pick SASS to preserve the visual feel of your Stylus codebase.

Will the SASS output compile with Dart Sass?

Yes. Save with a .sass extension (not .scss) and run sass input.sass output.css. Dart Sass autodetects the syntax from the file extension and uses the indented parser. sass-loader and Vite plugins do the same.

Are mixins translated automatically?

Mixin definitions are syntactic. Stylus uses inline calls like border-radius 4px; SASS uses =mixin-name and +mixin-name shorthand (or @mixin / @include). The converter handles syntax for variables and structure; mixins need a quick manual rewrite after conversion.

Are there any features that do not translate?

Stylus interpolation ({varName}) becomes SASS #{$varName}. Stylus property-as-callable mixins translate to SASS @include syntax. Stylus rest arguments (...) work the same in both. The 90% case (variables, declarations, nested selectors, & references) translates losslessly.

Does the converter preserve nested selectors?

Yes. Both Stylus and SASS use indentation for nesting, so the structure carries over directly. The & parent reference works identically in both languages.

Is my source uploaded?

No. Conversion runs entirely in your browser as JavaScript. Your .styl source never leaves the device. Verify in DevTools — Network tab stays empty when you click Convert.