Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS to Sass Refactoring with Sass Placeholder Selectors

Thien Nguyen
Thien Nguyen
20,555 Points
Posted by Thien Nguyen
Thien Nguyen
20,555 Points

It is painful to convert from css to sass

It is painful to convert from css to sass. It would be a lot better to start with sass. If a client ask me to turn their massive website from css to sass I will go insane.

3 Answers

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Thien,

The most important thing to remember though is that CSS itself is valid Sass. There's nothing you "need" to necessarily do to it. When I start transitioning a site to take advantage of features in Sass I start with splitting files up into partials to get things more organized. Only then do I start working through some of the other options. For example after that I start replacing common values with variables. When that is done I look for points of duplication and replace them with mixins or placeholder classes.

That's really about it as far as converting most sites and each of those don't necessarily need to happen immediately. Once all of those are done though I typically just do small refactorings to improve the site over time. I don't think you "need" to start doing crazy transitions like redoing your grid layouts with loops and all kinds of craziness unless there is a specific reason.

Kristjan Reinsberg
Kristjan Reinsberg
50,960 Points
Kristjan Reinsberg
Kristjan Reinsberg
50,960 Points

I have never felt that i need SASS.. even on big government projects.

  1. Big projects are using same styles everywhere.
  2. Big projects use style guide colors. (basically no need for SCSS variables)
  3. Loading time with including lots of .css files? (keep them together .. AND you are keeping them in cache anyway)

DONT USE SASS BECAUSE You have less errors and confusion with workflow. Other people understand your stuff more easy.. Others dont have to track down your css class and then start searching what extends they have inside it.. You dont struggele with remembering what mixins and extends mean what and where you finished your work last time.

USE SASS BECAUSE Styleguide colors should stay in variables Mixins for avoiding vendor prefix writing and snippets Maybe..Extends same styles project to project.. Import many CSS files to one file (faster loading)

HOW I GET WIN-WIN situation i use SASS with 1 main index file that imports other stylesheets (more complex approach does not work in real life... websites have sort life span.. people on projects change..)

Antonio Jaramillo
Antonio Jaramillo
15,604 Points
Antonio Jaramillo
Antonio Jaramillo
15,604 Points

Also, it seems that the "pain" you go through in the beginning can really pay off for you in future projects. I'm only a newb, but I can see reusing partials in separate projects as a HUGE time saver.