SASS to STYLUS
Paste SASS or SCSS and get a best-effort Stylus translation entirely in your browser, no upload required.
Example
Input (SCSS):
$primary: #3498db;
.btn {
color: $primary;
@include rounded(6px);
}Output (Stylus):
primary = #3498db
.btn
color: primary
rounded(6px)
How it works
A line-by-line syntactic transform rewrites SASS tokens ($var, @mixin, @include, @if, @each, etc.) into Stylus equivalents and optionally strips braces and semicolons. It is a syntax converter, not a full preprocessor, so complex expressions may need manual review.
Good to know
SASS to STYLUS converts SASS or SCSS source into Stylus syntax directly in your browser. It is built for front-end developers and design-system maintainers who are migrating an existing stylesheet from the Sass ecosystem to Stylus, or who simply want to see how a Sass construct maps onto Stylus's leaner, indentation-based grammar. Paste your code into the left pane, click Convert, and the Stylus translation appears on the right.
Reach for it when you are switching build pipelines, porting a component library, or learning Stylus by comparing equivalent snippets. It rewrites the common tokens you hit every day: $var: becomes var =, @mixin and @include lose their at-rules, @if/@else turn into if/else, and @each/@for loops collapse into Stylus for ... in form. With the "Strip braces & semicolons" box checked it also removes {} and trailing ; so the output reads like idiomatic, indented Stylus rather than a braces-and-semicolons hybrid.
Read the result as a head start, not a finished file. The converter works line by line and is purely syntactic, so anything that depends on runtime evaluation passes through untouched. Watch especially for these:
- Built-in functions like
darken(), lighten() or map-get() are copied verbatim and may need Stylus equivalents. - Complex interpolation, nested maps, and multi-line expressions can survive the transform but still produce code Stylus won't accept.
A practical tip: run a small representative snippet first, paste the output into your real Stylus build, and let the compiler flag what slipped through before you convert the whole project. Because everything happens on your device, you can do this with proprietary code safely, and the tool keeps working offline once the page has loaded.
Frequently asked questions
Does this fully compile SASS or run functions like darken()?
No. It is a syntactic converter that rewrites SASS/SCSS tokens into Stylus equivalents. Built-in functions such as darken() or map operations are passed through unchanged, so verify them against Stylus equivalents after converting.
Does it support both the SCSS (braces) and indented SASS syntaxes?
It is tuned for SCSS-style input with braces and semicolons, which it can strip into idiomatic indented Stylus. Indented .sass input mostly passes through since Stylus is also indentation-based, but mixed indentation should be reviewed.
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 SASS, SCSS, and Stylus?
SASS and SCSS are two syntaxes of the same Sass preprocessor: SCSS uses braces and semicolons like CSS, while the original indented SASS syntax omits them. Stylus is a separate preprocessor that is also indentation-based and makes braces, semicolons, and colons optional, which is why much of its syntax looks like a stripped-down version of SASS.
How do you declare a variable in Stylus compared to SASS?
In SASS or SCSS a variable is written as $name: value; with a leading dollar sign and a colon. In Stylus the dollar sign is dropped and assignment uses an equals sign, so $color: #333; becomes color = #333.
Does Stylus support mixins like SASS?
Yes. Stylus mixins are functions you define by name and parameter list and then call by name, without the @mixin and @include keywords that SASS requires. A SASS @include rounded(6px) simply becomes rounded(6px) in Stylus.
Can I convert Stylus back to SASS or SCSS?
Not with this tool, which only goes from SASS/SCSS to Stylus. CalcCafe lists separate STYLUS to SASS and STYLUS to SCSS converters for the reverse direction.
Will the converted Stylus code compile without changes?
Often the basic structure compiles, but it is not guaranteed. Built-in Sass functions, advanced maps, and intricate interpolation are passed through as-is, so you should run the output through a Stylus compiler and fix any flagged constructs.
How are SASS @each and @for loops handled?
Both are rewritten into Stylus for ... in loops. An @each $name in a, b, c becomes for name in a, b, c, and numeric @for ranges are converted using Stylus range operators (.. for inclusive through, ... for exclusive to).
Is Stylus still maintained and worth migrating to?
Stylus is an older preprocessor that is less actively developed than Sass, and many teams now use Sass with Dart Sass or move to native CSS variables and nesting. Whether to migrate depends on your project's needs; this tool only helps with the syntactic translation, not that decision.
Related tools