The Ruby Railroad

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.

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!