When would anyone want this?

Consolidating onto Stylus because an existing codebase already uses it, or experimenting with Stylus's flexibility on a small project.

What about SCSS's @mixin and @include?

They become plain Stylus functions. Stylus has transparent mixins — you call them without @include.

Yes — `#{$var}` in SCSS becomes `{$var}` in Stylus. Both work the same way in selectors and property names.

Only if your build includes a Stylus compiler. For most Node.js-based tooling that means adding stylus-loader or similar.

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

$gap: 1rem;

.grid {
  display: grid;
  gap: $gap;
}

Output

gap = 1rem

.grid
  display grid
  gap gap

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

Stylus's conditional assignment operator ?= has no SCSS equivalent, making reverse conversion harder than forward.
SCSS's @content blocks (mixin content injection) translate to Stylus's {block} placeholder syntax.
Stylus's postfix conditionals (color red if dark) offer syntactic sugar that SCSS cannot express in a single line.

When would anyone want this?: Consolidating onto Stylus because an existing codebase already uses it, or experimenting with Stylus's flexibility on a small project.
What about SCSS's @mixin and @include?: They become plain Stylus functions. Stylus has transparent mixins — you call them without @include.
Are interpolations preserved?: Yes — `#{$var}` in SCSS becomes `{$var}` in Stylus. Both work the same way in selectors and property names.
Will my build system handle the output?: Only if your build includes a Stylus compiler. For most Node.js-based tooling that means adding stylus-loader or similar.

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

$gap: 1rem;

.grid {
  display: grid;
  gap: $gap;
}

Output

gap = 1rem

.grid
  display grid
  gap gap

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

Stylus's conditional assignment operator ?= has no SCSS equivalent, making reverse conversion harder than forward.
SCSS's @content blocks (mixin content injection) translate to Stylus's {block} placeholder syntax.
Stylus's postfix conditionals (color red if dark) offer syntactic sugar that SCSS cannot express in a single line.

When would anyone want this?: Consolidating onto Stylus because an existing codebase already uses it, or experimenting with Stylus's flexibility on a small project.
What about SCSS's @mixin and @include?: They become plain Stylus functions. Stylus has transparent mixins — you call them without @include.
Are interpolations preserved?: Yes — `#{$var}` in SCSS becomes `{$var}` in Stylus. Both work the same way in selectors and property names.
Will my build system handle the output?: Only if your build includes a Stylus compiler. For most Node.js-based tooling that means adding stylus-loader or similar.