Does the output compile in Dart Sass without edits?

Simple nesting, variables, and properties usually do. Mixins with content blocks, Stylus-only functions, and interpolated selectors often need a follow-up edit. Always compile once before you commit.

Why did my variable stay unprefixed in a value?

The rewriter prefixes names matched as Stylus assignments or as known identifiers in property values. CSS keywords stay bare. If a custom name was never assigned in the pasted snippet, rename it by hand.

Will my comments survive?

Single-line // comments pass through. Block comment shapes vary between Stylus and SCSS. Keep the original file open and restore licence headers or section notes if they vanish.

Should I convert the whole theme in one paste?

No. Convert partial by partial. A single broken mixin is easier to spot in a 80-line file than in a 3,000-line dump. Diff compiled CSS against the old Stylus output after each file.

Is my Stylus uploaded anywhere?

No. Conversion runs in JavaScript inside your tab. Source and SCSS live in memory until you close the page.

I need indented Sass, not SCSS. Wrong tool?

This page always emits braces. Convert here first, then run the SCSS through the SCSS to SASS Converter, or use Stylus to SASS if you want the indented path in one step.

Stylus to SCSS Converter - Braces Back

Stylus in, SCSS out. Same rules, different punctuation.

Stylus treats whitespace as structure and treats colons as optional. SCSS keeps the nesting idea but demands braces, semicolons, and $ on every variable. The gap looks small until you open a 400-line partial written in 2016.

This page walks the indent tree, inserts the punctuation Sass expects, and rewrites assignments into $name: value; form. Compile the result locally before you merge. Syntax conversion is the easy half of a preprocessor swap.

Stylusoptional colons

brand = #1f6f8b
space = 12px
.site-header
background brand
padding space * 2
&__link
color brand
text-decoration none
&:hover
opacity 0.85

SCSSbraces required

$brand: #1f6f8b;$space: 12px;.site-header {background: $brand;padding: $space * 2;&__link {color: $brand;text-decoration: none;&:hover {opacity: 0.85;}}}

Load Nav with variables above to run a similar snippet through the live converter. The ampersand joins stay. The math stays. Only the punctuation changes.

What the rewrite does line by line

No Stylus compiler runs in the tab. The script reads indentation, classifies each line, then emits SCSS-shaped text.

name = value: Becomes $name: value;. Top-level assignments turn into Sass variables. Names with hyphens keep their spelling.
Property without a colon: color brand becomes color: $brand;. The first token is the property. The rest is the value. Known CSS keywords such as none and inherit keep their bare form.
Selectors and nesting: A shallower indent closes open braces. A deeper indent opens a child block. Two spaces per level matches most Stylus house styles. Tabs convert to spaces before the walk.
Mixin shape: Lines starting like a Stylus mixin definition get an @mixin prefix where the pattern is clear. Includes get @include. Block mixins with content blocks still need a manual pass.

Where this converter stops

No full Stylus runtime. Conditionals, loops, and interpolation written for Stylus semantics often need hand edits after the punctuation pass.
No filesystem.@import / @require paths do not resolve in the browser. Inline the partial, or convert files on disk in order.
No guarantee of identical CSS. Run the SCSS through the SCSS to CSS Converter and compare against output from your old Stylus build.
No indented .sass target. Output is always braced SCSS. For brace-free Sass, send the result through the SCSS to SASS Converter.
Large pastes pause the tab. Fine for a component. Awkward for a concatenated 8,000-line dump. Split the work.

Everything stays in the browser. Closing the tab clears the editors. Nothing uploads.

Skip this page when…

Leaving Stylus for plain CSS? Compile with Stylus locally, or use the Stylus to CSS path if you only need browser-ready rules. Moving toward LESS instead of Sass? Use Stylus to LESS. Prefer indented Sass without braces? Use Stylus to SASS.

We recommend SCSS as the migration target for most teams. Editor support, hiring pool, and docs all lean that way. The indented form still works. SCSS is the lower-friction default in 2026.

Stylus to SCSS Converter