Fear Not, SASS is with You

I was recently handed a front-end project at work, essentially a redesign for the carousel on our application’s home page.

Though on the surface, this project seemed straight forward, it scared me.

Why?

I like to consider myself a good back-end/server-side developer also competent in javascript/jquery. But as far as heavy duty css’ing, I can make an interface look ok, but fully realizing our designer’s mockups through CSS seemed tricky.

A side story:

When I was still living with my folks 10 or so years ago, my mom wanted to replace a storm door. I thought, “I can do this!” So on a gorgeous Saturday, without taking any measurements, I drove to the hardware store, purchased the door my mom was interested in, and proudly brought it home.

After removing the old door, I lifted the new one into the empty frame, and realized, it was not going to fit. My mother had apparently taken no measurements, and I had not bothered to verify that she’d taken measurements.

But being the resourceful person that I am, I decided to use the one tool I had available that could possibly solve my problem – a chainsaw. As carefully as possible, I used the tip of the chainsaw to chip away at one side of the frame until the opening was large enough to fit the door. It was quite a hassle, and the frame was looking pretty rough, but thankfully, the installed storm door covered my less than beautiful hack job.

This is how I felt about my front-end development work. I could certainly use my CSS chainsaw skills to ultimately get that carousel to look just right, but behind the scenes, the frame might be a mangled mess.

But that’s when our front-end developer came to my rescue. He took the chainsaw from my hands, and gave me a ruler that enabled me to size a storm door properly to the frame, or in my case, cleanly style a carousel.

SASS!

An acronym for Syntactically Awesome Style Sheets, it is well named.

Its most basic and powerful feature allows a developer the ability to avoid repetitive scopes via nesting. Here’s an example:

//CSS
.wrapper { width: 100px; }
.wrapper .button { color: red; }
.wrapper .button .big { height: 100px; }

//SASS
.wrapper {
  width: 100px;
  
  .button {
    color: red;
    
    .big {
      height: 100px;
    }
  }
}

That one trick makes styling in SASS much more pleasant than CSS. And the nice thing is that SASS is compiled into regular old, nasty CSS for you. Throw in Compass, and you now have a toolset of cross browser, pre-built reusable styling patterns at your disposal.

For instance, need a nice, horizontal list? Just include the following in your SASS file:

@import "compass/typography/lists/horizontal-list

//And to use:
ul.horizontal {
  @include horizontal-list; 
}

If you’re using CSS exclusively, you are missing out. And I can tell you, even if you are a primarily backend software developer, as long as you have a basic understanding of CSS, SASS/Compass should come easily to you. A one hour overview was enough to get me started, and a few fifteen minute refreshers got me through the project with a carousel that meets the design specs without hiding a very ugly frame.

If you are a rails engineer, SASS is already built in to versions 3.1 and later.

This article is not meant to be a comprehensive guide on how to install and fully implement SASS and Compass, but I hope it inspires you to look into it if you haven’t already. In my opinion, back-end developers should be as competent as possible in front-end work as well as server-side stuff. I’ve been bitten so many times by having to constantly offload front-end work to other devs. Depending on their schedule, which is often quite busy, you may have to wait a good bit for the styling to be complete before you can move on. Plus, it’s just fun being able to put together the engine and paint the frame 🙂

If you’d like a comprehensive guide on how to install SASS and Compass and use their many awesome features, I HIGHLY recommend the following book.

SASS

 

Pragmatic Guide to SASS by Hampton Catlin & Michael Catlin

Short enough to read in a day or to, and useful afterwards as a reference, it should pretty much get you fully up to speed.

Good luck SASS-ing!

Advertisements
Tagged , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: