Skip to content

Instantly share code, notes, and snippets.

@esbullington
Last active September 30, 2018 11:59
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • 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.

@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