jeffc

# October 15, 2012 at 1:16 pm

At what point in the learning coding process do you code-vets feel it is appropriate for someone to consider using stuff like SASS, Compass, Less, etc? I understand there are those who wouldn’t suggest it at all, while others now swear by it and use them daily.

I’ve been fascinated watching Chris using a global.scss in the Lodge videos: instant compiling and browser rendering, global color changes, etc. So for those of you who _do_ use these tools, when do you feel someone has enough of a grasp of the basics to benefit from them, and what walls might the unsuspecting beginner/intermediate run into along the way if used too early in their learning process? Thanks!

Hugo Giraudel

# October 16, 2012 at 4:23 am

I would suggest to have some bases in regular CSS before digging into pre-processors, but you can have a try pretty much whenever you want.

Even if it gives some awesome tools to make CSS development faster, it doesn’t give anything regular CSS can’t do (since the final result is CSS). So it can’t hurt you I guess. ;)

Andy Howells

# October 16, 2012 at 4:47 am

I’d recommend waiting until you feel comfortable enough with the intricacies – it’s not really about a arbitrary line, but when you start feeling that standard CSS is slowing you down and it’s getting boring chaining selectors.

For example, when you understand vendor prefixes and why they exist, adjacent & sibling selectors, targeting by type/attribute etc. Once you move from knowing these to getting annoyed that you have to type them all the time, that’s when to move to SASS.

The main reason that I use SASS/Compass is efficiency, nothing bores me more than typing out a gradient with 6 different browser prefixes, or having to copy paste a new colour into my stylesheet thirty times. Pre-processesors main benefits are variables, so you can re-use properties and DRY (don’t repeat yourself).

Mixins in SASS are badass to the maximum, Compass covers a lot, but every now and then it’s super handy to be able to do a mixin, for example, I have my own for stuff like font-sizing with REM’s that also generates a fallback to PX sizing. I do my font-stacks in a mixin with a colour parameter, it just makes it so I have a simple _vars.scss file that houses all my variables, colours and mixins and is about 100 lines long – changing stuff there changes the whole site, it still excites me even after using it for a couple months.

However, I wouldn’t recommend just jumping over to these because ultimately knowing regular CSS inside out will help you in the long run – SASS may not always be a practical solution or you might have to work on projects with people who don’t know how to use it for example, so knowing the base language before pre-processing, while not absolutely necessary, is definitely worthwhile.

jeffc

# October 17, 2012 at 7:56 am

@HugoGiraudel Thanks for your response!

@andy_unleash Your 2nd and 3rd paragraphs were exactly what I was looking for; appreciate you taking the time to spell it out. Thanks!