by Flo Preynat

It’s been almost a year I have been using Sass and Compass in my various web projects, and as I look back over this now-established design process, I can only think of the advantages those tools have brought to my daily routine.

This blog post is not here so I can dwell on the technical features of Sass and Compass, nor list the best mixins you could include if you were to use pre-processors, but more to motivate the designers keen to learn the technology, yet still waiting for their time to get cracking.

Yes, using Sass and Compass can look daunting for people used to deal with CSS exclusively. There is a learning curve, new tools to test, sometimes even some command lines to type in the terminal, all this can be a bit overwhelming indeed.

But it is SO worth it, you’ll kick yourself for not having done it earlier. I was reluctant too at the time. As I was before starting to use Version control systems like Git, or writing my CSS in a modular way.

Don’t Wait up!

My piece of advice to you would be: Do not wait up for the next big project to start using Sass and Compass! I often speak to fellow designers, who tell me they haven’t found the right project to start using pre-processors.

You are fooling yourselves if you think that you will start learning Sass and Compass on a big scale project, as part of a dev team (even small). Do it on your own on a poxy little project of yours, even a one-pager. This is the best time to get acquainted with pre-processors, read documentation and books on the subject. There is no way you will be able to do that when pushed by time, with deadlines approaching.

I promised I wasn’t going to talk code, but i’m going to talk resources. This is far from an exhaustive list, but I advise you to take a long look at them and get cracking with Sass and Compass, if you haven’t started using both.

So long folks.

Resources

Websites

Sass – Syntactically Awesome Stylesheets
The Sass Way
Compass Home Documentation

Blog Posts

#chris-eppstein {position: unique;} – Blog
Chris Coyier’s Sass style guide
Using Compass and Sass for CSS in your Next Project
Ben Frain’s Sass-related blog posts

Books

Sass and Compass for designers by Ben Frain ( my review of the book here)

Screencasts

Assembling Sass – a free course by Codeschool
CSS-tricks’ Video Tutorials on How to Build Modern Websites (*)
Tim likes to teach (*)

* a special mention to Tim and Chris’ video series, which are membership only, but a bargain considering they will make you gain valuable time by reducing your Sass and Compass learning curve.

Tools

Codekit for mac users only
Prepros for windows users only
Scout for both mac and windows users (only compiles Sass and Compass as opposed to Codekit and Prepros)

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Most Recent Posts

Special Recent Posts

Sip: a color picker refreshingly simple indeed

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch – the CMS that does not pollute your web design workflow

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

Project Naphta: a nifty extension to play with text embedded in images

June 9th, 2014

We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]

Free photos for your web design projects

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]

Comments

Be the first to drop your two cents here!