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.

Add to Flipboard

5 thoughts on “Using Sass to Save Yourself A Lot of Time Building Responsive Websites

  1. bye bye love

    Hmm is anyone else experiencing problems with the
    pictures on this blog loading? I’m trying to find out if its a problem on my end or if it’s the blog.
    Any feedback would be greatly appreciated.

    Reply
    1. taupecat Post author

      Unfortunately, I think it’s on my end. I looked through the media library in admin and I’m seeing a lot of broken images on the older stuff. I’ll take a look at it and see if I can fix it.

      Thanks for the heads up.

      Reply
  2. Pingback: Get Sassy

    1. taupecat Post author

      This article is a little old, and yes I’m using functions instead of inline formulae now. However, I will admit that I wasn’t aware of a Sass-native “percentage” function. Instead, I use a custom function that does the same thing which I’ve baked into a mixin library just for my RWD work at https://github.com/taupecat/sass-responsive.

      Perhaps I should update that with this new information in mind. Thanks!

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>