SCSS to STYLUS
Paste SCSS and get a best-effort Stylus translation handling variables, mixins, includes and comments entirely in your browser.
Example
SCSS input:
$primary: #3366ff;
@mixin card($pad: 1rem) {
padding: $pad;
}
.box {
color: $primary;
@include card(2rem);
}Stylus output:
primary = #3366ff
card($pad: 1rem) {
padding: pad
}
.box {
color: primary
card(2rem)
}How it works
It rewrites SCSS tokens to Stylus equivalents ($var to var, @mixin/@include to plain function-style names, drops semicolons) while keeping optional braces that Stylus still accepts. Review the output, since deeply nested SCSS logic may need manual cleanup.
Good to know
SCSS to STYLUS is a browser-based converter that takes Sass's SCSS syntax and rewrites it into Stylus syntax. It targets the parts of a stylesheet that differ most between the two preprocessors: it strips the $ prefix from variables and rewrites their declarations using = assignment, turns @mixin and @function definitions into plain function-style names, converts @include foo(...) calls into bare foo(...) calls, rewrites #{...} interpolation to Stylus's {...} form, removes !default, and drops trailing semicolons. It is aimed at front-end developers migrating a project, a component library, or a snippet from a Sass codebase to Stylus, or anyone who wants a quick syntactic starting point rather than retyping rules by hand.
Reach for it when you are porting an existing stylesheet, evaluating Stylus on a sample of real code, or translating an example you found in SCSS so it fits a Stylus pipeline. Because everything runs locally in your browser with no upload, it is also safe for proprietary or unreleased styling code. Paste into the SCSS input pane and the output updates as you type; use Load sample to see a worked example covering variables, a mixin with a default argument, nesting, and the &:hover parent selector.
Read the output as a draft, not a finished file. The conversion is deliberately syntactic: it keeps curly braces because Stylus accepts optional braces, so it never tries to guess significant indentation and risk producing something that won't parse. The status line says "Converted (best-effort). Review output before use." for a reason — anything that depends on semantics rather than surface tokens is where you should look first.
- Things converted reliably: variable names and assignments, mixin/include/function names, interpolation, comments, and semicolon removal.
- Things to check by hand: control flow such as
@if, @each and @for; @function bodies and return logic; SCSS maps; and @content blocks, which are replaced with a literal {block} placeholder you must wire up to Stylus's block mixin pattern yourself.
Frequently asked questions
Why does the output still keep curly braces instead of indentation?
Stylus accepts optional braces and colons, so braces are preserved deliberately. Reliably converting SCSS's brace blocks into Stylus's significant indentation is error-prone, so this tool keeps braces to guarantee the result still parses as valid Stylus.
Does it handle @if, @each, @function and SCSS maps?
Only partially. Variables, @mixin, @include, interpolation and comments are handled well, but SCSS control flow (@if/@each/@for), @function bodies, !default and maps differ semantically in Stylus and should be reviewed and adjusted manually after conversion.
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 SCSS and Stylus?
Both are CSS preprocessors, but SCSS (a Sass syntax) uses a CSS-like format with required braces, semicolons, and a $ prefix for variables. Stylus is more permissive: braces, colons, and semicolons are all optional, variables are assigned with = and used without a sigil, and indentation can replace braces entirely.
How do you declare a variable in Stylus?
In Stylus you write the name, an equals sign, and the value, for example primary = #3366ff. You then reference it just by its name, like color primary, without any $ prefix.
Can you convert Stylus back to SCSS?
Not with this tool, which only goes from SCSS to Stylus. A reverse conversion is harder because Stylus allows optional braces and indentation-based blocks that must be reconstructed into SCSS's required brace syntax, so it would need a different converter.
Is Stylus still maintained in 2026?
Stylus remains available as an open-source npm package and is still used in some projects, though it sees far less active development and community momentum than Sass/SCSS or PostCSS. Many teams now prefer Sass, PostCSS, or native CSS features for new work.
How do mixins work differently in Stylus versus SCSS?
SCSS defines a mixin with @mixin name and applies it with @include name. Stylus drops both keywords: you define a mixin as name(args) and call it simply as name(args), which is why this converter rewrites @mixin and @include to plain function-style names.
Why was my SCSS @each loop not converted correctly?
This tool performs syntactic, not semantic, conversion, and SCSS control flow such as @each, @if, and @for differs in meaning from Stylus equivalents. Those constructs are flagged for manual review and should be rewritten and tested by hand after conversion.
Does converting SCSS to Stylus change how my compiled CSS looks?
The goal is equivalent CSS output, but because the conversion is best-effort and certain features like maps, functions, and control flow may not translate cleanly, the compiled result can differ. Compile both versions and compare the generated CSS to confirm they match before relying on the output.
Related tools