About the SCSS to Stylus Converter
The output of this converter is Stylus at its most characteristic: no braces, no semicolons, and variables written as plain assignments. Your SCSS is parsed into a rule tree first, so nesting depth, selector lists and at-rule bodies all land in the right place rather than being pattern matched line by line. That matters for files where a media query wraps several rules or where a mixin body contains its own nested selectors.
Sigils and interpolation are the two token level changes. A variable declared $radius: 10px becomes radius = 10px, and only names the parser actually saw being assigned are rewritten inside values, so a property value that happens to contain the word radius as part of a longer token is left alone. Interpolation moves from #{$name} to {name}, which is the form Stylus resolves in selectors, property names and values alike.
Mixins keep their meaning. @mixin panel($pad: 24px) becomes the definition panel(pad = 24px) and each @include becomes a bare call. A variable carrying !default is emitted with the ?= operator, which guards the assignment the same way. Sass maps, @function blocks and the loop directives are copied through as text, because Stylus expresses those with its own hash literals and for syntax. Read those sections before you delete the SCSS original.
How to use
- Paste your SCSS into the left pane or upload the file.
- Pick an indent width, and decide whether colons stay between property and value.
- Convert, then review any loop or function blocks that were copied through unchanged.
- Download the file as .styl and build it.
Common questions
- Does Stylus support the parent selector?
- Yes, with the same ampersand character. Nested state rules such as &:focus and &.is-active carry over with no edits needed.
- How are Sass maps handled?
- They are passed through untouched. Stylus has its own hash literal syntax, so a map and every map-get call need rewriting by hand.
- Why do some values keep their dollar sign?
- Stylus accepts dollar prefixed identifiers, so a name the parser never saw declared is left exactly as written rather than being guessed at.
- What if my SCSS uses @use?
- The statement is copied as written. Stylus resolves files with @import instead, so change the line and drop any module namespace prefixes.