About the Stylus to SCSS Converter
SCSS is where most Stylus projects end up, because it is the dialect every bundler, linter and editor plugin supports first. The conversion adds braces around each indented block and a semicolon after each declaration, then renames the pieces that differ: assignments such as radius = 10px become $radius: 10px, and colon free declarations such as display grid are written out in full.
Only names the parser saw being assigned are treated as variables, which is the safe way to handle a language where a variable reference looks exactly like a CSS keyword. Mixin parameters count as assignments too, so a parameter named pad is correctly rewritten as $pad inside the mixin body while a value such as grid or inherit is left alone. Interpolation in braces becomes the #{$name} form.
Mixins are converted in both directions of the relationship. The definition panel(pad = 24px) becomes @mixin panel($pad: 24px), and every bare call site becomes an @include. A ?= assignment gains the !default flag. Loops, conditionals and hash literals are copied through unchanged, since Stylus and Sass express those differently enough that a mechanical translation would be a guess. Once the file is in SCSS, run it through the SCSS Compiler and fix whatever the first error points at.
How to use
- Paste the .styl file contents into the left pane.
- Pick the indent width used by the rest of your project.
- Convert, then compile the result and fix any construct that was copied through as text.
- Save the file as .scss and update the import lines that referenced it.
Common questions
- Are mixin parameters renamed inside the body?
- Yes. Parameter names are collected before the body is read, so each use inside the mixin picks up the dollar prefix along with the signature.
- What if my Stylus file uses braces already?
- That is supported. The converter detects block openers and switches to the brace aware parser, so mixed style files still convert.
- Do Stylus loops become Sass @each blocks?
- No. Iteration is copied through as written, because the two languages handle lists and ranges differently and a wrong guess would silently change your styles.
- Which should I convert first in a large project?
- Start with the variable and mixin partials, since everything imports them. Once those compile, convert component files one at a time.