Stylus to SCSS Converter Online

Translate Stylus indented syntax to SCSS — $variables preserved, braces and semicolons added, nesting kept. 100% in your browser.

Input Stylus

SCSS Output

What is a Stylus to SCSS Converter?

A Stylus to SCSS converter rewrites Stylus indented syntax into SCSS — the brace-and-semicolon flavour of Sass. Both languages share the $ sigil for variables, the same nesting model, and the & parent reference. The converter handles the structural translation (indent to braces) and produces a valid .scss file that compiles with Dart Sass.

SCSS is the dominant CSS preprocessor today — it powers Bootstrap 4+, Material UI styling, and most design systems. Migrating from Stylus to SCSS unlocks the broadest editor and tooling support without giving up the variables, mixins, and nesting workflow you already use.

How to convert Stylus to SCSS — 4 steps

Paste your Stylus. Drop a .styl file into the Input panel, or click Load Sample for a starter example.
Click Convert. The tool emits SCSS with braces, semicolons, and a normalised $ on every variable.
Review the SCSS. Confirm nested rules, &:hover references, and variables look right. Mixins need a manual @mixin/@include pass.
Save as .scss. Copy the output, save with a .scss extension, and compile with sass input.scss output.css.

Sample Stylus in, SCSS out

Input — Stylus

$primary = #66ccff
$padding = 12px

.nav
  display: flex
  align-items: center
  padding: $padding 24px
  background: #1a1a1a

  a
    color: #fff
    margin-right: 16px

    &:hover
      color: $primary

Output — SCSS

$primary: #66ccff;
$padding: 12px;

.nav {
  display: flex;
  align-items: center;
  padding: $padding 24px;
  background: #1a1a1a;
  a {
    color: #fff;
    margin-right: 16px;
    &:hover {
      color: $primary;
    }
  }
}

Same Variable Sigil

Stylus and SCSS both use $name. The converter just normalises the form (with assignment colon) — no rename pass needed.

Nesting Preserved

SCSS uses the same nested-rule model. Indented blocks become brace-wrapped child rules with no manual restructuring.

Client-Side Only

Translation runs in JavaScript inside your browser. .styl source never leaves your machine.

Common use cases

check_circleMigrating a Vue or Express codebase from Stylus to SCSS
check_circleStandardising a multi-app design system on SCSS
check_circlePorting Stylus components into a Bootstrap 4+ project
check_circleConverting Material design tokens from .styl to .scss
check_circleProducing SCSS partials from existing Stylus component files
check_circleBootstrapping a Vite or webpack SCSS pipeline from Stylus source
check_circleSide-by-side evaluation of SCSS vs Stylus on a sample component
check_circleModernising legacy Stylus to the SCSS preprocessor mainstream

Stylus vs SCSS — when to migrate

Stylus is more concise (optional braces, semicolons, even colons) but its ecosystem has shrunk significantly. SCSS keeps braces and semicolons — making it instantly readable to any CSS developer — and powers the majority of modern frontend stacks: Bootstrap, Material, Tailwind's @apply layer, and most enterprise design systems. Editor support, IDE autocomplete, and Stack Overflow answers are best-in-class for SCSS. If you value minimal syntax and your team is small, stay on Stylus. If you want the broadest tooling and easy onboarding, migrating to SCSS is the safer modern choice. SASS (the indented Sass dialect) keeps the indentation aesthetic of Stylus — see Stylus to SASS if that matters.

Need to go further?

Convert between every CSS preprocessor — all browser-side.

Stylus to SASS Stylus to LESS SCSS to CSS

Frequently Asked Questions

Do Stylus and SCSS share the same variable sigil?

Almost. Stylus accepts $name = value or just name = value (no sigil). SCSS uses $name: value. The converter normalises both forms to the SCSS standard — every variable gets a $ prefix and a colon between the name and value.

Why is SCSS the most common preprocessor today?

SCSS keeps CSS-style braces and semicolons, so any CSS developer can read it. It powers Bootstrap 4+, Material-UI styling, design systems at most large companies, and ships with create-react-app, Vite, and webpack out of the box. Editor support and IDE auto-complete are best-in-class. Migrating Stylus to SCSS gains the broadest tooling.

Are nested selectors translated correctly?

Yes. SCSS uses the same nested-rule model as Stylus, so each indented child block becomes a brace-wrapped child rule. The & parent reference works identically in both languages — no manual rewrite needed.

How do Stylus mixins translate to SCSS?

Stylus mixins are called like properties (border-radius 4px); SCSS mixins use @mixin name { ... } and @include name(args). The converter handles the syntax transition for variables and nesting; mixin definitions and @include calls need a manual pass after conversion.

Does it support @media and @keyframes?

Yes. @media and @keyframes blocks become brace-wrapped at-rules in the SCSS output. Nested @media inside selectors works in SCSS too — the converter preserves the structure.

Will the SCSS output compile with Dart Sass?

Yes. The output is standard SCSS that compiles with Dart Sass (the official compiler since 2019), node-sass (deprecated but still in many builds), or sass-loader for webpack and Vite. Save as .scss and run sass input.scss output.css.

What about Stylus functions and conditionals?

Stylus functions (function name() ... ) translate to SCSS @function name() { @return ...; }. Stylus conditionals use Python-like if/else; SCSS uses @if / @else. These language-level constructs need a manual rewrite — the converter focuses on syntax translation for the 90% case.

Is my source uploaded?

No. The conversion runs entirely in your browser as JavaScript. .styl source files containing internal class names or design tokens never leave your machine. Verify in DevTools — Network tab stays empty.