STYLUS to SCSS
Rewrite indentation-based Stylus source into brace-and-semicolon SCSS with a best-effort, line-by-line syntactic transform.
Example
Stylus input:
$primary = #3498db
.card
color $primary
padding 10px 20px
SCSS output:
$primary: #3498db;
.card {
color: $primary;
padding: 10px 20px;
}How it works
It tracks indentation to insert { } blocks, then converts each line: assignments become $var: value;, declarations get colons and semicolons, and Stylus mixin definitions/calls map to @mixin/@include. It is a syntactic helper, not a full compiler.
Good to know
This Stylus to SCSS converter takes indentation-based Stylus stylesheets and rewrites them into the brace-and-semicolon syntax that Sass uses in its SCSS dialect. It works entirely in your browser as a line-by-line text transform, so it is aimed at front-end developers migrating an older Stylus codebase, or anyone who has copied a Stylus snippet and needs it in a SCSS project without learning both syntaxes by hand.
Reach for it when you are porting components off Stylus, pulling a code sample from documentation or a Stack Overflow answer that happens to be written in Stylus, or standardizing a team on Sass. It is most reliable on the everyday parts of a stylesheet: nested selectors, plain property declarations, variable assignments (which become $name: value;), and simple mixin definitions and calls that map to @mixin and @include.
Read the output as a draft, not a finished file. The tool does not compile or evaluate anything, so it cannot catch logic errors and it deliberately flags its result as best-effort. Skim the generated SCSS for any line that looks copied verbatim rather than rewritten, check that braces opened and closed where you expected based on the original indentation, and run it through a real Sass compiler to confirm it builds.
The main caveat is that Stylus-specific power features do not survive the conversion intact. Expect to fix these by hand:
- Transparent mixins, hash and object maps,
@block, property lookups, complex interpolation, and Stylus operators that have no direct SCSS equivalent.
Frequently asked questions
Does this run the real Stylus or Sass compiler?
No. It performs a best-effort line-by-line syntactic rewrite that adds braces, semicolons and colons and maps variables and mixins. It does not compile or evaluate the code, so always review the result.
Which Stylus features may not convert correctly?
Advanced features like transparent mixins, hash/object maps, @block, property lookups, complex interpolation and Stylus-specific operators are not fully translated and may need manual fixes.
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
What is the difference between Stylus and SCSS syntax?
Stylus is largely whitespace-significant: it lets you omit braces, colons, and semicolons and infers structure from indentation. SCSS keeps CSS-like syntax with mandatory braces around blocks, colons between property and value, and semicolons ending declarations, so converting between them is mostly about adding or removing that punctuation.
Can I convert Stylus to SCSS without installing anything?
Yes. This is a browser-based tool that runs as client-side JavaScript, so you paste your Stylus, click Convert, and copy the SCSS output without installing a compiler or any Node packages.
Why does Sass use SCSS instead of Stylus?
SCSS is a superset of CSS, meaning any valid CSS is also valid SCSS, which lowers the learning curve and eases incremental adoption. Sass is also more widely supported by tooling and build pipelines today, while Stylus is comparatively less actively maintained, which is a common reason teams migrate.
How are Stylus mixins converted to SCSS?
A Stylus mixin definition written with a name and parenthesized parameters is rewritten to an @mixin block, and a call to that mixin becomes an @include statement. Stylus also supports transparent mixins that look like property assignments, and those are not detected, so they need manual conversion.
Does this converter handle nested selectors?
Yes. It reads the indentation of each line to decide where to open and close braces, so nested selectors and their child declarations are wrapped in the correct SCSS blocks. Mixed tabs and inconsistent indentation can throw off nesting, so keep the input indentation uniform.
Is the converted SCSS guaranteed to compile?
No. The conversion is a syntactic rewrite that does not run a compiler, so the output should be treated as a starting point and validated by compiling it with a real Sass toolchain before use.
Can I convert SCSS back to Stylus with this tool?
No, this tool only goes one direction, from Stylus to SCSS. For the reverse you would need a different converter, and round-tripping styles between preprocessors generally loses formatting and any features without an exact equivalent.
Does converting Stylus to SCSS change how my styles render?
The goal is to preserve the same compiled CSS output, since both are just preprocessor syntaxes for the same end result. In practice, features that do not translate cleanly can alter or break the output, which is why reviewing and compiling the result is important.
Related tools