CSS productivity - Getting started with Sass

Working with CSS for about six months makes me think of productivity features. Of course I tried using frameworks such as blueprintcss and 960gs but they always get in my way. I had never been productive on these kinds of frameworks. There was a time I tried some of them, all of them kept on battling with my styles. So I settled with good old CSS styling. This post is another trip on finding the right path in redefining productivity with CSS.

What is sass?

Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.

Here's the beauty of sass, it's in the syntax. Copied from sass-lang.com


Install sass following this tutorial.

In my setup I used cygwin under windows 7. I installed both ruby and ruby gems then followed the sass tutorial.

Now you're ready up and running on using sass. But one problem is, your going to access the command line just to generate a CSS file from a SASS file. This is going against our productivity work-flow. Gladly a new feature which "auto-compile Sass files whenever they change" is now available with Sass 2.4. It is currently in development but we can get it up running.

First download haml from git then extract it anywhere you want. Here in my example I have a folder sass_sample/ containing style.sass and style.css. I extracted the zip file inside sass_sample/ and renamed it to haml/. From here you can take a look at my screenshot in bash.

To sum the screenie above. I simply installed haml using the extracted file from github. Don't bother the errors I got when using "rake install", it's because I'm usng cygwin. After all the work, using "sass --watch sass_samp/" will watch any file changes in that directory and auto-compiles it.

I'm still new to Sass. I'm making myself more productive on it. I'll gladly post updates whenever I came up with something cool.

If you have any questions, let me here it in the comments.

Retweet Loading mentions

0 comments

Leave a comment...

 
Got an account with one of these? Login here, or just enter your comment below.
Posterous-login    twitter