To Sass or Not to Sass?

First things first. If you are looking for advanced tips and tricks on Sass, to know everything about it, you might want to look elsewhere… like some of these articles listed here and a ton of others on the web. Some of these also talk more about cons, things to keep in mind etc. esp. the one on Lea Verou’s blog and one from CSS-Tricks.

http://css-tricks.com/video-screencasts/111-get-yourself-preprocessing-in-just-a-few-minutes/
http://css-tricks.com/musings-on-preprocessing/
http://www.codeschool.com/courses/assembling-sass
http://css-tricks.com/lingering-misconceptions-on-css-preprocessors/
http://css-tricks.com/sass-style-guide/
http://lea.verou.me/2011/03/on-css-preprocessors/
https://gist.github.com/pfulton/2730670
http://sass-lang.com/
http://thesassway.com/

Who is this post for?

If you are someone who has heard about Sass, kinda like it, not sure if you want to start learning it, since you have a ton of other new things to learn on your plate already, and want to hear from someone who has just made the leap into learning Sass, yes, this is the place.
Also, this post is not just about Sass, but more of how I incorporated Sass into my current project, things that made learning it easy (for my style of learning) and more fun.
To make things easy, Read/Do PART II only after you’ve read/done the suggested things (reading list) in Part I. It won’t make much sense otherwise.

Let me jump right in with some points/pointers in order.

PART I: Say hi to CSS pre-processors (Sass here):

1. It might not be the best way to start learning or trying to understand Sass by getting on the main Sass website. Try the other websites first, starting with basics and experiences from people I have listed on the top.
2. What is Sass in simple terms: I think of it as “CSS shorthand” … Writing CSS in a terse format, nesting selectors the way things make sense, using variables for the things you repeat (think of your brand colors, typography elements, media query breakpoints and more), keeping all your CSS for specific items separate (for some of us “monks”) but still be able to bring in only the bits and pieces we want together (@import) and then compiling it so it outputs CSS as we know it. Ooh compiling, command line… I am outta here… No stay with me… cue in some super-woman music and enters this amazing little software called CodeKit (more recently mixture.io and others do similar things, but I haven’t tried that).
3. http://incident57.com/codekit/ Yes, CodeKit makes Sass and playing with Sass and frameworks just SO MUCH FUN! Compiling, command-line, Fuhgeddaboudit! It does it all for you. More about it later. Oh, btw, that’s just for Mac and there might be something called Scout app for Windows, I think Mixture.io works on windows as well. May be some others too. Check it out.
4. Addendum: If you'd rather stick with CLI workflow, checkout Node JS with Grunt workflow.
5. OK, sounds good, how do I start?
6. Get a general idea about CSS pre-processors and Sass from the few links listed on top, read some basic articles, video tutorials if you wish, but don’t linger too long with nitty gritties to make you want to give up! Get an idea of mixins, learn about Compass, but you don’t need to start using compass right away. Baby steps if you’d like.
7. I am guessing you’ve already decided on on which “flavor” of CSS pre-processor you want to use i.e. Sass (.scss) vs LESS. If you are not sure, to make it easy on you, I’ll say Sass, but if you want to find out for yourself, read this http://css-tricks.com/sass-vs-less/
   

PART II: OK, how do I really start? 

1. Get CodeKit (or mixture.io or whichever software you’d like to use to make compiling easy). Of course you have just the straight command-line options as well. Read about CodeKit and how it works. It is more than just a Sass compiler. It concatenates, minifies your files and even reduces your image sizes further (like Kraken.io or such).
2. You are gonna need a fancier HTML editor than Dreamweaver… this is no WYSIWIG stuff! I went for Sublime Text, go for what ever floats your boat.
3. Now just get started on a project. Huh, but I am not ready yet!! Yes, you are. If you still aren’t sure, start on a smaller one.
4. If it is possible to use a CSS framework in your workflow, it’s the easiest way to learn by example. Get a framework that has the Sass version. I chose Foundation 4 by Zurb and it is awesome! You can see how they’ve used variables, mixins, best practices and learn compass too if you wish and by the time you are done with the project, you’ve also learnt the basics and more of Sass. http://thesassway.com/projects/zurb-foundation
5. Gone are the days of having to “customize” the framework and select only the components you need and still having to look at 100s of lines of code in your CSS if you have to edit something. With Sass, you just import the pieces you need for each template (home, back page etc.). Once you point your project to the framework in CodeKit, it finds all your imported Sass files for you. You don’t even need to specify paths for it, CodeKit just knows. Just watch this…
6. http://incident57.com/codekit/video/frameworks.mov
7. Now for something even better, if you have to customize a certain file a lot eg. _global.scss or _type.scss to fit your branding, leave those files alone in the framework folder and put a copy of those, with the same name in YOUR PROJECT Sass folder and customize all you want. CodeKit will first look for files in your Sass folder and then look in the framework folder.
8. If you are customizing just a few things, just over-ride them in your home.scss instead after @imports where you are importing all Sass goodies.
9. Remember, CodeKit concatenates and minifies all other .scss files and CSS for you and outputs a CSS named differently from your home.scss (with a suffix etc.) so make sure you are linking to that CSS file in your html file etc. (after this step it is just your basic CSS and HTML). Yes, this has to be all done locally and it may be hard if your CSS/Sass is edited by a team. Chris Coyier talks about it in one of those links.
10. Codekit also concatenates JS files and minifies it. You can get several levels of minification. With JS, I find it the lowest level is better as some scripts don’t work with minification (make sure you have back-ups).

I’ve talked about variables, mixins @import, ease of using frameworks and more to inspire you to use Sass, but wait there’s more…
I can’t conclude without talking about the live refresh in CodeKit. Make some changes in your Sass (probably a bunch of changes, even better) wait, don’t hit save yet, Keep your browser window open on the side or other monitor (your project folder that CodeKit is “watching” for changes. As you would know from CodeKit docs, it only works with webkit browsers). Now hit save and see the “instant magic” in the browser window!!

I REST MY CASE!
This is just meant to be a pointer or starter or inspiration for using Sass and in no way a full guide/workshop or "how to"s on Sass. Hope it inspires you to use Sass in your next project.
Here is my first project, using Sass with CodeKit and Foundation 4 Framework, and yes the wireframes in the beginning werer created in Balsamiq.
http://www.behance.net/gallery/WVU-Research-Redesign-UIUX-%28wireframes%29-Screenshots/9527457