About Stylus to SASS

Convert Stylus to SASS syntax. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Use Cases

• Teams consolidating from Stylus to the original Sass indented syntax
• Ruby developers preferring Sass syntax for consistency with Haml views
• Developers migrating Stylus code to Sass for Dart Sass compatibility
• Projects switching to Sass for its more established community support

Tips

• Both use indentation, so check that nesting depth is preserved
• Verify that Stylus's implicit returns become explicit in SASS
• Check that Stylus interpolation converts to SASS #{} syntax

Fun Facts

• Both Stylus and indented Sass share indentation-based syntax, making this one of the most natural preprocessor conversions.
• Indented Sass was the original Sass syntax (2006), predating Stylus (2010) by four years.
• Despite syntactic similarities, Sass uses = for mixins and + for includes, while Stylus uses transparent function calls.

FAQ

Stylus and Sass both use indentation — is the conversion trivial?

Syntactically similar but the grammars differ: Sass requires a leading $ on variables and uses @include for mixins. The converter rewrites these.

Will my Stylus comments survive?

Yes — both line comments (//) and block comments (/* */) are preserved.

What about Stylus's @extend?

Stylus's @extend is closer to Sass @extend than SCSS @extend. Conversion is direct.

Should I convert to Sass or SCSS?

SCSS is far more popular. Only pick Sass indented syntax if you have a strong team preference.