About the SASS to Stylus Converter
Both languages build their structure out of indentation, so the outline of your file survives this conversion completely intact. What changes is the vocabulary. A declaration written $brand: #f25f1e becomes brand = #f25f1e, and every reference to that name in a value drops its dollar sign. Interpolation moves from #{$name} to the plain braces {name} that Stylus uses in selectors and property names.
Mixin syntax converges nicely between these two. The indented Sass shorthand =panel($pad: 24px) maps onto the Stylus definition panel(pad = 24px), and a call written +panel(20px) becomes simply panel(20px), because Stylus treats a bare function style call as a mixin invocation. Default values keep working, and the argument order is preserved exactly.
One Sass idea makes the trip in a slightly different costume. A variable marked !default only assigns when nothing has set it yet, and Stylus expresses the same guard with the ?= operator, so the flag is converted rather than dropped. Control directives such as @each and @if are copied as text and need rewriting with Stylus iteration, which uses for loops with a slightly different shape. Since Stylus lets you omit the colon in a declaration, a checkbox picks between the compact and the familiar spelling.
How to use
- Paste your indented Sass into the left pane.
- Keep the indent width the same as your source if you want the diff to stay small.
- Untick Keep colons for the terse Stylus look, or leave it on for a file that still reads like CSS.
- Save the output with a .styl extension and run it through a Stylus build.
Common questions
- Is the !default flag preserved?
- Yes. It becomes the ?= operator, which assigns only when the name has no value yet, matching what !default does in Sass.
- How does Stylus handle nesting and the parent selector?
- Identically to Sass. An ampersand refers to the enclosing selector, so state rules such as &:hover need no change at all.
- Are Sass functions available in Stylus?
- Some names overlap, such as lighten and darken, but the argument handling differs. Test every colour function call after converting.
- Do I need to change my indentation width?
- No. Stylus only cares that indentation is consistent within a file, so two spaces, four spaces or tabs all work as long as you do not mix them.