SCSS to Stylus Converter Online

Strip braces and semicolons from SCSS to produce indented Stylus — the most concise CSS preprocessor. 100% in your browser.

Input SCSS

Stylus Output

What is an SCSS to Stylus Converter?

An SCSS to Stylus converter rewrites the brace-and-semicolon SCSS syntax into the indented Stylus syntax. Braces are stripped, semicolons removed, and 2-space indentation expresses structure. Variables ($name) and the & parent reference work identically in both languages, so the conversion is mostly mechanical.

Stylus is the most concise CSS preprocessor — even colons are optional in declarations. Migrating from SCSS to Stylus is the right call when keystroke economy matters and your team works in Vue.js or Pug ecosystems.

How to convert SCSS to Stylus — 4 steps

Paste your SCSS. Drop a .scss file into the Input panel, or click Load Sample.
Click Convert. Braces are stripped, semicolons removed, and indentation defines structure for the .styl output.
Review the Stylus. Confirm $variables, nested rules, and pseudo-classes look right. Mixins need a manual rewrite.
Save as .styl. Compile with stylus -p input.styl or wire it into webpack via stylus-loader.

Sample SCSS in, Stylus out

Input — 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;
    }
  }
}

Output — 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

Most Concise Output

Stylus drops braces, semicolons, and even colons. The converter outputs the colon-and-indent form for readability — drop colons later if you prefer.

Stylus CLI Compatible

Output compiles with the official stylus CLI and stylus-loader for webpack and Vite. No flags required.

Client-Side Only

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

Common use cases

check_circleMigrating an SCSS codebase to Stylus for a Vue.js + Pug stack
check_circleStandardising a Vue project on Stylus rather than mixing SCSS and Stylus
check_circlePorting components into a Stylus-based design system
check_circleConverting SCSS to .styl for Express applications
check_circleProducing .styl partials from existing SCSS component files
check_circleBootstrapping a Stylus design system from existing SCSS
check_circleSide-by-side compare SCSS vs Stylus on a real component
check_circleModernising an SCSS codebase to the most concise preprocessor

SCSS vs Stylus — when to switch

SCSS is the dominant preprocessor today — Bootstrap, Material UI, Vite, Angular CLI, and most enterprise design systems use it. Editor support and IDE autocomplete are best-in-class. Stylus is dramatically more concise but its ecosystem has shrunk; it is most common in Vue.js and Express + Pug stacks. Switch to Stylus only if your team values the syntax aesthetic and works in those ecosystems. For most projects, sticking with SCSS is the safer call. If you want indented but maintained, see SCSS to SASS.

Need to go further?

Convert between every CSS preprocessor — all browser-side.

SCSS to SASS SCSS to LESS Stylus to SCSS

Frequently Asked Questions

Why convert SCSS to Stylus?

Stylus is the most concise CSS preprocessor — no braces, no semicolons, even colons are optional. Teams in Vue.js or Express + Pug ecosystems often prefer Stylus for the visual cleanliness. The conversion is mostly mechanical and the converter handles 90% of stylesheets.

Do SCSS variables work the same in Stylus?

Yes. Both use $name. Stylus also accepts no sigil at all — name = value works just as well. The converter keeps the $ form, which is the safest and most readable choice for variable references that span multiple files.

Are nested selectors preserved?

Yes. Stylus uses indentation for nesting just like SASS — the converter strips braces and uses indent levels. The & parent reference works identically in both languages.

How are SCSS @mixin and @include translated?

SCSS uses @mixin name { ... } and @include name. Stylus mixins are called like properties: border-radius 4px. The converter handles syntax (variables, structure) but mixin definitions and call sites need a manual rewrite — usually a few minutes per component.

Will the Stylus output compile with the stylus CLI?

Yes. Save with a .styl extension and run stylus -p input.styl to print compiled CSS, or stylus input.styl to write a .css file alongside the source. stylus-loader for webpack and Vue-CLI work the same way.

Does the converter handle @media queries?

Yes. @media (min-width: 768px) blocks are preserved with the @ prefix and the body becomes indented. Nested @media inside selectors also works in Stylus.

What about @if / @each / @for control structures?

Stylus has its own control syntax (if/else without @, for loops). The converter strips braces from @if blocks but the @ remains. After conversion, replace @if with if and @each with for to use the native Stylus syntax. Or keep the @-prefixed versions — Stylus accepts them as @-rules with the body still indented.

Is my source uploaded?

No. Conversion runs entirely in your browser as JavaScript. Your .scss source never leaves the device. Verify in DevTools — Network tab stays empty when you click Convert.