Convert Stylus to SASS/SCSS

intro.md

Convert Stylus to SASS

Here's how I converted a whole batch of Stylus files to SASS without using a converter (none exist, that I'm aware of), converting each Stylus file manually, or programming my own Stylus->SASS converter, which would have entailed building a parser, and then generate SCSS from the AST.

First, grab sandr.py here: https://github.com/jfgiraud/sandr

Then, in the directory of your Stylus files, run (if you have multiple directory levels, you can do similar task using find):

for file in *.styl; do echo "/*! FILENAME: $file */" >tempfile; cat $file >>tempfile; mv tempfile $file; done 

This is so you'll be able to properly divide up the CSS/SCSS once we finish, since we have to compile it into a single file (no way around this that I know due to scoping issues). The exclamation mark appears necessary for the Stylus compiler to retain the comment.

Then, using the Stylus binary where you have installed any Stylus modules, compile your Stylus into a single CSS file:

./node_modules/.bin/stylus -u nib -u jeet -p YOURMAINSTYLUSFILE.styl > all.css

Then, create a map of your Stylus variable values to their corresponding variables. If you've got a deliminter of more than one space between the variable and value, Awk is nice for this (this is set to 2 spaces): awk -F $' ' ' { t = $1; $1 = $2; $2 = t; print; } ' OFS=$'=>' variables.styl > map.txt You'll also want to add semicolons and the SASS $ to these variables, which I used Vim's column insert to do.

Then, use sandr.py and the map you've created to replace all the occurances of these variables in the all.css file with the variables you've created.

Rename the CSS file to .scss, and see if it validates. If it does, you can now go through and divide the files back up into individual SCSS files according to the inserted comments with the filenames.

OK, so it's involved a lot of manual work, and it's an ugly hack, but it took at least me less time to do this for ~20 Stylus files than it would have to build a converter manually, or to manually port each of these files into SASS.

Obviously, if you're doing this more than once or possibly twice, you probably want to go ahead and build a proper parser/generator for this.

Hi! Thanks for this guide!
I just converted 15 stylesheets using another technique and wanted to share it.
I used www.sasstoscss.com to convert stylus to scss.
Since stylus is pretty similar to sass (indent based), I just had to add colons where missing and convert the function mixins.

Not a bad workaround, but beware that this loses all nesting and generates a flat structure. You can get your variables back and split up the files, but other than that it becomes vanilla CSS.

I got this error when I run the following command python sandr.py -e -s BONjour -r helLO -i aaa to test sandr.py

  File "sandr.py", line 76
    print(message, file=sys.stderr)
                       ^
SyntaxError: invalid syntax

can anyone help ?

@anaibol your site reference appears to be broken

You may need this https://github.com/txs1992/stylus-converter