CSS to SASS (or LESS) conversion

Question

Can anyone recommend some CSS to less, or CSS to sass conversion tools? I have found a few .e.g. http://css2less.cc/ and http://css2sass.herokuapp.com/ but any insight into their reliability (or recommendations of other tools) would be greatly appreciated. I have a large CSS code base for a white label solution which would benefit greatly from having a CSS preprocessor in place but it would be a huge task to manually convert to sass/less.

Thanks in advance

EDIT: I should emphasize I'm particularly interested in experiences of using a tool (such as those listed above (in the absence of any better ones)) to convert a large CSS code base towards using a CSS preprocessor such as SASS or LESS. Or if any other ways (other than the tools listed) to achieve such a feat are pragmatic. What hurdles did you have to overcome? Is it even worth attempting? Or are such metalanguages only suited to a new project where you can start from scratch?

Solution 1

The good thing about SASS is that you don't need to convert CSS into SASS, since SASS is an extension of CSS.

Simply copy and paste and you're good to go.

If you're looking to refactor your CSS into well structured SASS files though, thats something i don't think a tool can do.

Solution 2

I made good experiences with http://css2sass.heroku.com/. You can also find their code base on github. You can also convert files directly via the sass-convert tool which will be installed by the original sass gem. Basically this is just what css2sass is doing.

Just call:

sass-convert -F css -T sass original_file.css converted_file.sass

Solution 3

This post needs the following 2 online tools listed for any future viewers.

Firstly, I would always run the css through this online tool to convert it to cleaner shorthand css http://shrthnd.volume7.io/ - no explanation needed really, just makes it all cleaner and smaller if you're not in the habit of writing your css that way already.

Then, through this online tool http://sebastianpontow.de/css2compass/ -This is a really good tool for creating scss files from your css. It will convert all colors to your preferred format, set color variables and font variables and overall give you a good idea of the basics of sass just by seeing what it did to your css.

The only thing I have noticed as not so desirable in the second tool is that it names font families like this $font_0: Open Sans; $font_1: Roboto Condensed; $font_2: arial; and so on. I always find it more intuitive to name them in short form of the actual font, or setup 3-5 names that relate to the content such as $font_main, $font_sub, $font_callout, $font_titles or however you prefer. But that's a 30second fix when you paste it all back into your brand new scss file :)

Solution 4

It's a bit late, but recently I found this online conversion tool:

http://css2sass.heroku.com/

It helped me out though it sometimes reject valid css

View more solutions

Comments

[rlemon]

[yes I realize this is two years old now, but...] this should be asked on softwarerecs.stackexchange.com

[Muntasim]

I've found this handy sebastianpontow.de/css2compass

[Zack Zilic]

link changed css2sass.herokuapp.com

[rbginge]

Thanks Vinay. Have you used lessify? I'd be interested to hear your experience of it. For example, how the compiled css compares to the original (in terms of function); especially in the context of a large css codebase

[rbginge]

Thanks Vinay. Lessify isn't a css preprocessor. It's the original link you posted in your answer (about a tool that performs css to SASS conversion). You seem to be referring to SASS in your edit. I already understand the advantages of SASS. I'm interested in people's experience of using a tool to convert current CSS to a metalanguage such as SASS within a legacy css codebase.

[Clark Pan]

I could recommend this tool to you purely for visual formatting, although it doesnt do much for structure.

[rbginge]

Looks like there's an executable that comes with the sass gem called sass-convert that does more or less the same as the other tools mentioned in my question. Beyond nesting common prefixes it looks like you're correct in that there isn't a tool that will refactor the css into well structured SASS (so marking your answer as correct). After that, low hanging fruit such as variables for redundant colours, widths, padding etc are a good place to start. Then when I've all that nailed down I can add some Mixins! Cheers

[Félix Adriyel Gagnon-Grenier]

that.... is actually false. css code inside an sass file will cause a syntax error. and yes, both links in op's question can restructure css into properly structures sass code.

[Sebastianb]

as @FélixGagnon-Grenier said, CSS isn't compatible with SASS syntax, but note that it is compatible with SCSS syntax, available since SASS 3 IIRC