Using Sass to Save Yourself A Lot of Time Building Responsive Websites

When you’re building a responsive website, there’s a formula you learn pretty quickly, and apply pretty often:

target / context * 100 = percentage

In a nutshell, the target is the desired width you want your element (or your padding, or your margin) to be, and the context is the width of the parent element in your perfect world. Basically, you’re getting the ratio of the element to its parent, then multiplying that by 100 to get an actual percentage number.

For more details on how this all works, see chapter 2 of Ethan Marcotte’s Responsive Web Design book.

But in the responsive design projects I’ve done, that’s meant calculations, and lots of them. Not only that, but having to use the software calculator in order to make sure I carry over the maximum decimal precision possible.

For example, assume we have a standard two column web page based on a 960px wide grid and we want the main column to be 600px wide, with a 20px right margin, and a sidebar that’s 340px wide. In the non-responsive, non-fluid world, that would work out to a stylesheet that looked something like this:

.container {
    max-width: 960px;
}

.container .main-column {
    float: left;
    margin-right: 20px;
    width: 600px;
}

.container .sidebar {
    float: left;
    width: 340px;
}

But of course, we want our responsive site to be all fluid and what-not. That means expressing our widths in percentages, not pixels. And that means it’s time to break out the calculator and whip up the following results from our formula above:

62.5%, 2.083333333333%, 35.416666666667%

So our finished CSS would look more like:

.container {
    max-width: 960px;
}

.container .main-column {
    float: left;
    margin-right: 62.5%;
    width: 2.083333333333%;
}

.container .sidebar {
    float: left;
    width: 35.416666666667%;
}

This is not fun. I’ve done this enough times that I’m thoroughly sick of doing it by hand.

Enter the wonderful world of CSS preprocessors. They have a lot going for them, from honest to goodness variables, to mixins (something akin to functions in other programming languages), and, germane to this post, the ability to do actual math inside the style property. Think about that for a minute.

So instead of having to go to the calculator and figure out all your numbers, then entering them in your stylesheet as such:

.container {
    max-width: 960px;
}

.container .main-column {
    float: left;
    margin-right: 600px / 960px * 100%;
    width: 20px / 960px * 100%;
}

.container .sidebar {
    float: left;
    width: 340px / 960px * 100%;
}

And since Sass can nest our CSS properties, we can make things look a little bit nicer if we do this instead:

.container {
    max-width: 960px;

    .main-column {
        float: left;
        margin-right: 600px / 960px * 100%;
        width: 20px / 960px * 100%;
    }

    .sidebar {
        float: left;
        width: 340px / 960px * 100%;
    }
}

And with that, you can skip the calculator (almost) altogether. (Yeah, there’s going to be times where you need to fire it up to calculate something else.) But still, you’re going to save hours upon hours this way.

You’re welcome.