Going with Sass
In the last week, I started using Sass to help with writing out CSS on a project. I’ve never really been that good with CSS. Kind of felt like a bit of a mystery and shooting in the dark. Moreover, it always felt strange to have this big file to dump all the stylings into. Or even worse, having a bunch of CSS files linked up in an HTML file. I would lose track of where I was and end up tripping over myself. Plus, I think coming from an object-oriented programming background, it just didn’t feel right. So, Sass, amongst other many useful things, helps with simple organization and keeping things DRY.
I’ve done the usual Googling to learn about Sass. The Sass website is a pretty good place to start. However, I just purchased a strong, foundational book on Sass by Dan Cederholm called Sass for Web Designers. It’s a guick read and extremely helpful. It takes you through the core of Sass, plus some practical ways on how to use it.
Obviously, I’m in the early days with Sass, but there has been one change that has freaked me out a little bit. That is the change to my CSS workflow. For years I have used Espresso (formerly CSSEdit) to hack around to get some decent stylings on my web pages going. This is a great tool for dealing with pure CSS. You make a change in the CSS and you can automatically see the change in a preview view…wihout saving the file first. In addition, it has some very helpful UI elements that would write quick entries into your CSS file (e.g. changing fonts or colors, etc.). This was great for quickly iterating through a design. With going with Sass, I can’t use Espresso this way. Because you have to compile your Sass code into CSS, Espresso doesn’t have the feature to compile then refresh. So, I did some research and there are a few ways to use Sass and iteratetively design. For now this is my approach for editing styles on my web pages:
Edit .scss files in Sublime Text.
Save.
Use LiveReload to watch the directory where my .scss files are, compile them into .css files and then reload my browser(s).
There are pros and cons with this approach vs using Espresso. One of the pros is that it renders your changes within multiple browsers…Safari, Chrome or Firefox (I think I can try doing this with IE on a virtual machine, but I haven’t gone that far….yet). A big con is the time it takes to iterate changes. The saving, recompiling and refreshing of the browser takes seconds vs fractions of a second via Espresso’s live preview approach.
However, there is a bit of a sleeper pro that I think will trump this time-to-iterate con. And that is I am actually learning a lot more about CSS and memorizing a lot more of the commands. This has to do with the fact that I don’t have a GUI to rely on or “cheat” with. Also, when your working with Sass, you really need to have a good understanding of how the compiled CSS file will turn out and how that will impact your website.
To summarize, Sass really helps with keeping my CSS workflow organized, efficient and it helps reduce “bugs” in the CSS. My workflow is still a little in flux, but I think I like where I’m heading. Plus, I will become a little better with my craft going this route.