Calculate Breakpoints

Calculate Responsive Grid Breakpoints with SASS

You love SASS?! OMG me too! Here’s a nifty SASS Function to do some math for that awesome responsive grid of yours.

@function calc-breakpoint($col:9,$colMargin:12,$colW:69px) {
    @return #{($colW * $col) + ($colMargin * max($col - 1,0))};  

Maybe you have a 12 column grid, each grid is 69px with 12px in between. Sound familiar? You read Responsive Web Design by Ethan Marcotte didn’t you? Anyways, let’s say you want to do some responsive magic if the browser screen is less than 9 columns.

    .blog .main, .blog .other {
        /* when the screen is 9 columns or less, apply these styles */
        @media only screen and (max-width:calc-breakpoint(9,12,69)) { /* breaks at 717px */

Pat yourself on the back on your way out of class.

Comments (0)

Add a Comment

Allowed tags: <b><i><br>Comment:

** Time spent on this website is non-refundable **