WebToolsPlanet
Converter Tools

Stylus to SASS Converter

Paste Stylus source and get indented SASS — variables, mixins, and includes are rewritten in SASS conventions.

Last updated: May 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Stylus to SASS Converter?

Stylus and indented SASS both prefer whitespace-based blocks, so a Stylus stylesheet often looks superficially similar to a SASS one. The differences are in punctuation and sigils: SASS requires `$` before variable names and uses `=` and `+` shorthand for mixin definitions and includes. Stylus declares variables with `name = value`, uses bare identifiers for variable references, and treats mixin definitions and calls as plain identifiers followed by parentheses.

This converter first normalises Stylus into SCSS-style source so it can pick up variable assignments and mixin definitions reliably, then runs the SCSS-to-SASS pass, which strips braces and semicolons, restores indentation-based nesting, and replaces `@mixin`/`@include` with SASS `=name`/`+name` shorthand.

It is well suited for migrating a Stylus project to indented SASS, integrating Stylus snippets into an existing SASS codebase, or comparing how the two indentation-based syntaxes line up. Stylus-only features such as transparent mixins, control flow, and built-in helpers are not translated.

How to Use Stylus to SASS Converter

1

Paste Stylus code into the input panel.

2

The SASS output appears instantly on the right.

3

Inspect the rewritten variables, mixins, and nested rules.

4

Copy the SASS or download it as a .sass file.

5

Rework anything that relied on Stylus-only built-ins.

Common Use Cases

  • Migrate a Stylus stylesheet into a SASS-based project.
  • Integrate a Stylus component into a SASS design system.
  • Compare equivalent variable and mixin syntax between Stylus and SASS.
  • Generate a SASS baseline from a Stylus prototype before adding SASS helpers.
  • Convert documentation snippets from Stylus to SASS for an article.

Example Input and Output

Convert Stylus assignments and a mixin into SASS shorthand.

Stylus input
primary = #0f766e
flex-center()
  display flex

.hero
  flex-center()
  color primary
SASS output
$primary: #0f766e
=flex-center
  display: flex
.hero
  +flex-center()
  color: $primary

Privacy

All conversion happens locally in your browser. No Stylus or SASS is transmitted to any server.

Stylus-only features

Transparent mixins, control flow, and Stylus built-in functions are not translated. Review and rework these manually after conversion.

Frequently Asked Questions

What is the difference between SASS and SCSS?

SCSS uses curly braces and semicolons. SASS is the older indentation-based syntax with no braces, plus = and + shorthand for mixins. This tool targets the indented SASS flavour.

How are bare identifiers handled?

Identifiers that match an earlier `name = value` assignment are prefixed with `$` in the output. Other identifiers (keyword values, units) are left alone.

Are nested selectors preserved?

Yes. Nested selectors and & parent references work the same way in Stylus and SASS, so they pass through after the brace and shorthand conversion.

Does my Stylus get uploaded?

No. Conversion runs entirely in your browser — nothing is sent to a server.

Related Tools

Part of a Collection