I'd like to share something that has been part of my design workflow for the past 5 years that I strongly recommend to web designers especially when you're starting out, learn Sass and use Compass. I have always used CSS from the start. However, when Sass was introduced to me, I had a change of heart. Comparing both, I feel there are a lot of uneccesary effort using CSS. Another disadvantage I experienced using CSS is that as the project grows, it takes up so much effort just to organize the files. So when I learned about Sass, I immediately changed my workflow and started using it on every project I have.

How long did I learn Sass? Well, I remember I just learned it in a day. I immediately understood the syntax right after I research for it in a day simply because it's very straight forward.

Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.

http://sass-lang.com/

What's the relation between Sass and Compass? Well, it turns out that Compass makes it even more awesome to use Sass as it automatically compiles Sass files into CSS.

Compass is an open-source CSS Authoring Framework.

http://compass-style.org/

I'll leave it up to you to do your own research on how to install Sass and Compass because I know you're an awesome learner. I'll just list down some resources that I find super helpful with my workflow transition to CSS to Sass, using Compass as my compiler.

How to install Sass?

There are different ways to install Sass depending on what OS you use. As a start, you can check out the step-by-step guide on how to install Sass here - http://sass-lang.com/install. It shows you a list of links and steps on how to get started.

How to install Compass?

Compass made a step-by-step guide on how to install Compass here - http://compass-style.org/install/

There are times wherein open-source projects can help you with your project. Sometimes, it only provide you with CSS files. Don't worry! Here's a great CSS to Sass converter that you can use so you don't have to manually convert it to Sass - http://css2sass.herokuapp.com/

How to compile your Compass project?

Once everything is already installed in your workstation (Sass and Compass), here's the code snippet that you will use to create a new project:

In the terminal type: compass create [name of the project] -r bootstrap-sass --using bootstrap

^*Please take note here why I'm also using Bootstrap. Bootstrap is the front-end framework that I use. I'll save that for my next article.

After creating your project, just type in the terminal compass compile.
If you want to automatically compile it without you going back and forth your terminal, just type compass watch

I hope I shared something that sparked up your interest to explore better ways on how to improve your design workflow.