Skip to content

Instantly share code, notes, and snippets.

@esbullington
Last active September 30, 2018 11:59
Show Gist options
  • Save esbullington/e1693a091533606095bb to your computer and use it in GitHub Desktop.
Save esbullington/e1693a091533606095bb to your computer and use it in GitHub Desktop.
Convert Stylus to SASS/SCSS

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.

@anaibol
Copy link

anaibol commented Mar 12, 2016

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.

@sefffal
Copy link

sefffal commented May 30, 2016

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.

@msalahz
Copy link

msalahz commented Aug 31, 2016

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 ?

@michaelgaigg
Copy link

@anaibol your site reference appears to be broken

@txs1992
Copy link

txs1992 commented May 24, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment