What is the easiest way to convert an existing project to Sass?

[drewwyatt]

I have recently jumped on the Sass bandwagon – and like most people I had a “where have you been my whole life?” moment. I have a couple of BIG projects going that have to be maintained pretty regularly that I would like to use Sass for (it would make my life a lot easier).

What am I up against here? Transcribing all of the existing CSS to Sass (or SCSS) by hand? Or is there any easier way?

This is a question of best practices. I have found a handful of options before posting this – but I would like to know what is generally accepted or recommended.

[Alen]

> Transcribing all of the existing CSS to Sass (or SCSS) by hand?

I wouldn’t bother. Just start every new project with Sass.

[tronboyd]

There are [generators](http://css2sass.heroku.com/) out there that people have made, but I’m not sure if I trust them. The best way to get current projects onto LESS or Sass is to remember that all CSS is valid LESS (or SCSS, in this case) and then translate your stylesheets as you work on them, adding in your own mixins or variables when needed. Give yourself time to make a good transition. Rushing it will most likely result in many headaches.

Above all: test first, THEN deploy to production. :)

[chrisburton]

If it will ultimately save you significant time down the road, I don’t see why not.

[TheDoc]

The thing is, there isn’t really a *conversion* from CSS to SCSS. The most I would do is separate things out into separate files like `_header.scss` and `_sidebar.scss` and include them. But in terms of nesting, etc, I don’t really see the point for existing projects.

[drewwyatt]

Thank you guys for the comments! I think I have decided to slowly go through this bit by bit (it could use some cleaning anyway). Something I hadn’t considered was **TheDoc**’s point about dropping things in piece by piece. Definitely going to be doing this.

[Author]

Posts