Stylus to SCSS Converter

Paste Stylus source and get SCSS — braces and semicolons are added, variables become `$variables`, and bare references are prefixed automatically.

Last updated: May 25, 2026

Stylus Input

SCSS Output

$primary: #0f766e;
$spacing: 1rem;

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;

}
.card {
  background: white;
  padding: $spacing;
  border: 1px solid $primary;

  .title {
    color: $primary;
    font-size: 1.25rem;

  }
  &:hover {
    background: $primary;
    color: white;

  }
}
.hero {
  @include flex-center();
  min-height: 100vh;
  background: $primary;
}

Converts Stylus to SCSS. Adds braces, colons, and semicolons, rewrites name = value as $name: value;, and prefixes bare identifiers that reference declared variables.

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Stylus to SCSS Converter?

Stylus and SCSS are both CSS preprocessors with similar capabilities — variables, nested selectors, parent references (`&`), and mixins — but the two flavours look quite different on the page. Stylus prefers indentation, treats colons and semicolons as optional, and uses bare identifiers (`name = value`, `color primary`). SCSS uses curly braces, mandatory semicolons, and the `$` sigil for every variable.

This converter normalises Stylus into SCSS-style source: it detects whether your input uses indentation or braces, adds the syntactic punctuation SCSS requires, rewrites `name = value` declarations as `$name: value;`, and prefixes bare identifier references with `$` when they match a declared variable. Stylus mixin definitions and calls are translated to SCSS `@mixin`/`@include`.

It is well suited for migrating a Stylus codebase to Sass, integrating Stylus snippets into an existing SCSS design system, or simply comparing how the two syntaxes line up. Advanced Stylus features (transparent mixins, control flow, built-in colour and math helpers) are not evaluated and may need manual rework.

How to Use Stylus to SCSS Converter

Paste Stylus code into the input panel.

The SCSS output appears instantly on the right.

Inspect the rewritten variables, mixin calls, and nested rules.

Copy the SCSS or download it as a .scss file.

Rework anything that relied on Stylus-only built-ins.

Common Use Cases

Migrate a Stylus stylesheet into an SCSS project.
Integrate a Stylus component into a Sass-based design system.
Compare equivalent variable and mixin syntax between Stylus and SCSS.
Generate an SCSS baseline from a Stylus prototype for further refinement.
Convert documentation snippets from Stylus to SCSS for an article.

Example Input and Output

Convert Stylus assignments and a mixin into SCSS equivalents.

Stylus input

primary = #0f766e
flex-center()
  display flex

.hero
  flex-center()
  color primary

SCSS output

$primary: #0f766e;
@mixin flex-center {
  display: flex;
}
.hero {
  @include flex-center();
  color: $primary;
}

Privacy

All conversion happens locally in your browser. No Stylus or SCSS is transmitted to any server.

Stylus-only features

Transparent mixins, @block-style assignments, and Stylus built-in functions are not translated. Review and rework these manually after conversion.

Frequently Asked Questions

Can SCSS compilers consume Stylus files?

No. Stylus and SCSS use different syntax for variables, statements, and punctuation. This tool rewrites the syntactic differences so the result is valid SCSS.

How are bare identifiers handled?

Identifiers that match an earlier `name = value` assignment are prefixed with `$` in the output. Other identifiers (e.g. keyword values like `flex`) are left alone.

Does it support brace-style Stylus?

Yes. The converter detects brace-style Stylus and converts variable assignments while leaving the brace structure intact.

Does my Stylus get uploaded?

No. Conversion runs entirely in your browser — nothing is sent to a server.