STYLUS to SASS
Convert Stylus source into the indented SASS syntax with a best-effort, line-based syntactic transform that runs entirely in your browser.
Example
Stylus input:
primary = #3498db
.card
color primary
padding 16px
+shadow(2px)
SASS output:
$primary: #3498db;
.card
color: primary;
padding: 16px;
@include shadow(2px);
How it works
It walks each line and rewrites Stylus constructs (variable assignment, +mixin() calls, interpolation, $-prefixed vars) into their SASS equivalents while preserving indentation. There is no real Stylus parser in the browser, so complex expressions, functions, and operators are passed through unchanged and flagged.
Good to know
This tool converts Stylus stylesheets into the indented SASS syntax (the .sass dialect that uses whitespace instead of braces and semicolons). It is aimed at front-end developers migrating off Stylus, which is no longer actively maintained, and who want to land in SASS rather than SCSS. Because Stylus and indented SASS both rely on significant indentation, the conversion is largely a line-by-line syntactic rewrite rather than a full reflow.
Reach for it when you have legacy Stylus files and want a fast first pass instead of retyping every rule by hand. It recognizes a handful of common patterns and rewrites them: bare variable assignments become $name: value;, +mixin() calls become @include mixin();, bare mixin-style definitions become @mixin blocks, {var} interpolation becomes #{$var}, and property declarations that were missing a colon get one. Indentation is preserved exactly, so your nesting structure carries over intact.
Read the status line under the panes as your to-do list, not a pass/fail grade. It will warn you with messages like "expressions not evaluated" when it detects math or conditionals, and "verify @include/@mixin names" when it has guessed that a function-style call is actually a mixin. There is no real Stylus engine in the browser, so variable math, if/unless/return logic, and built-in Stylus functions are passed through unchanged for you to fix manually.
A practical caveat: the mixin-versus-CSS-function heuristic is imperfect. The tool keeps a short allow-list of real CSS functions (such as url, calc, rgb, gradients, and transforms), but any other name(args) line is assumed to be a mixin call. After converting, skim for any custom function call that was wrongly turned into @include, and double-check that property values flagged by the warnings actually compile under your SASS toolchain.
Frequently asked questions
Does this fully compile or evaluate Stylus expressions?
No. There is no Stylus engine in the browser, so this is a line-based syntactic rewrite. Variable math, conditionals, and built-in Stylus functions are passed through unchanged and flagged in the status line for you to fix manually.
Why does it output indented SASS and not SCSS?
Stylus and the SASS indented syntax both use significant whitespace and omit braces and semicolons in source, so they map closely. The tool keeps your indentation and only rewrites assignments, mixins/includes, interpolation, and missing colons, which makes the indented SASS syntax the most faithful target.
Is my data uploaded anywhere?
No — this tool runs entirely in your browser. Your input never leaves your device and it works offline once loaded.
Is it free?
Yes, completely free with no sign-up and no limits.
People also ask
Is Stylus still maintained, and should I migrate away from it?
Stylus has seen very little active development for years, while SASS remains widely maintained and supported by the broader tooling ecosystem. Many teams migrate to keep their build pipeline on supported, well-documented tooling, though existing Stylus code can still compile with the legacy CLI.
What is the difference between the indented SASS syntax and SCSS?
Indented SASS (.sass) uses significant whitespace and omits braces and semicolons, much like Stylus, while SCSS (.scss) is a superset of CSS that uses braces and semicolons. They are functionally equivalent and the SASS compiler reads both; the choice is purely stylistic.
Can this tool convert Stylus variable math and conditionals automatically?
No. It performs a line-based syntactic rewrite without evaluating expressions, so variable math, if/unless/return logic, and built-in Stylus functions are copied through unchanged. The status line flags these so you can convert them to SASS equivalents by hand.
How does the tool decide whether something is a mixin or a CSS function?
A bare call like name(args) is treated as a mixin include unless the name matches a built-in CSS function such as url, calc, rgb, gradients, or transforms. This means custom functions can be misclassified as @include calls, so review function-style lines after converting.
Does Stylus interpolation convert correctly to SASS?
Yes for the common case: {expression} becomes #{...}, and a simple identifier like {primary} becomes #{$primary} since it is assumed to reference a variable. More complex interpolated expressions are wrapped as-is and may need manual adjustment.
Is my Stylus code uploaded to a server when I use this converter?
No. The conversion runs entirely in your browser with client-side JavaScript, so your code never leaves your device, and the page works offline once it has loaded.
After converting, do I still need a SASS compiler to get CSS?
Yes. This tool only translates Stylus syntax into SASS source; it does not produce final CSS. You still need to run the output through a SASS compiler such as Dart Sass to generate CSS.
Why might the converted SASS not compile right away?
Because unevaluated Stylus expressions, built-in functions, and possibly misclassified mixin calls are passed through verbatim, the output is a best-effort draft. Reviewing the lines highlighted by the status warnings is usually what is needed before it compiles cleanly.
Related tools