Is Stylus→SCSS the most common Stylus migration?

Yes — SCSS is the dominant preprocessor today, so most teams moving off Stylus pick SCSS.

Do variables convert?

Yes: Stylus `$color = red` becomes SCSS `$color: red;`. The tool handles both SCSS styles and the older Sass indented style.

Stylus allows space-separated values without explicit operators. The converter adds explicit concatenation where SCSS requires it.

Usually a few spots — complex Stylus functions (especially those using the `arguments` variable) need hand-porting.

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

Input

.nav
  display flex
  align-items center
  padding 1rem

Output

.nav {
  display: flex;
  align-items: center;
  padding: 1rem;
}

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

SCSS has significantly more community plugins and libraries than Stylus, which is a common reason for migration.
Stylus's block-level expressions have no direct SCSS equivalent, requiring manual restructuring during conversion.
The Compass framework for Sass/SCSS provided hundreds of ready-made mixins, something Stylus's ecosystem never fully matched.

Is Stylus→SCSS the most common Stylus migration?: Yes — SCSS is the dominant preprocessor today, so most teams moving off Stylus pick SCSS.
Do variables convert?: Yes: Stylus `$color = red` becomes SCSS `$color: red;`. The tool handles both SCSS styles and the older Sass indented style.
What about Stylus's implicit concatenation?: Stylus allows space-separated values without explicit operators. The converter adds explicit concatenation where SCSS requires it.
Will I need to touch the output?: Usually a few spots — complex Stylus functions (especially those using the `arguments` variable) need hand-porting.

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

Input

.nav
  display flex
  align-items center
  padding 1rem

Output

.nav {
  display: flex;
  align-items: center;
  padding: 1rem;
}

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

SCSS has significantly more community plugins and libraries than Stylus, which is a common reason for migration.
Stylus's block-level expressions have no direct SCSS equivalent, requiring manual restructuring during conversion.
The Compass framework for Sass/SCSS provided hundreds of ready-made mixins, something Stylus's ecosystem never fully matched.

Is Stylus→SCSS the most common Stylus migration?: Yes — SCSS is the dominant preprocessor today, so most teams moving off Stylus pick SCSS.
Do variables convert?: Yes: Stylus `$color = red` becomes SCSS `$color: red;`. The tool handles both SCSS styles and the older Sass indented style.
What about Stylus's implicit concatenation?: Stylus allows space-separated values without explicit operators. The converter adds explicit concatenation where SCSS requires it.
Will I need to touch the output?: Usually a few spots — complex Stylus functions (especially those using the `arguments` variable) need hand-porting.