Using Zurb Foundation, how can I create breakpoints in my grid size without a deprecation warning?

Question

tl;dr; I've implemented a way to regenerate Foundation's grid inside media queries. But it results in a Sass deprecation warning. Is there a better implementation to accomplish my goal?

The goal

I'd like to change the total grid width (thereby changing each column size in the grid) for different responsive break points using media queries. For example, I want a small grid for tablets (with a total width of 768px) but a large grid for large desktops (with a total width of 1200px). Twitter Bootstrap has a similar implementation, but Foundation does not.

What I'm doing

I've implemented a simple way to create my own additional breakpoints in the responsive grid for my project. Inside a media query (for large desktops for example) I change the grid width to 1200px and then I @import "foundation/components/grid"; again inside this query. This effectively regenerates the grid (with a larger size) inside the media query for large desktops.

The problem is that I'm getting a deprecation warning from the compiler, and I'm hoping to get some advice on my implementation. First of all, it's working just great (my css is doing what I want)... But this will break if I upgrade to Sass 3.3 in the future.

The specific warning

DEPRECATION WARNING on line 29 of /usr/local/Cellar/ruby/1.9.3-p327/lib/ruby/gems/1.9.1/gems/zurb-foundation-3.2.2/scss/foundation/components/_grid.scss: @extending an outer selector from within @media is deprecated. You may only @extend selectors within the same directive. This will be an error in Sass 3.3. It can only work once @extend is supported natively in the browser.

Steps to reproduce / code sample

1. Created a Foundation project

2. Included my own partial named _theme.scss and included that in app.scss. (This will contain my own styles and also allow me to override any Foundation things that I can't override in _settings.scss and gives me a cleaner upgrade path.)

3. In my _theme.scss I have some media queries. One example is:

   // LARGE DESKTOP & UP
   @media (min-width: 1441px) {
   
       // change the total rowWidth for big screens
       $rowWidth: 1200px;
   
       // now import the grid partial again and generate a bunch of grid styles
       // with this new default ONLY for use inside this media query
       @import "foundation/components/grid";
   
       // other big screen tweaks such as a bigger logo image
       #logo {
           height: 100px;
           background: url("../images/logo_large.png") no-repeat scroll 50% 0 transparent;
       }
   }
   

The issue comes into play where in "_grid.scss" we use an "@extend" directive on line 29 as seen below:

// Creating .row-# classes
@for $i from 1 through $totalColumns {
  .row {
    .#{convert-number-to-word($i)} { @extend .#{convert-number-to-word($i)}; }
  }
}

Because this is imported inside my media query I get the warning (above).

So... Any suggestions? I'm sure my hack wasn't the intended usage of "_grid.scss", but it's the best/only way I can think to do this. Thanks so much for any help!

Answer 1

$rowWidth simply determines the width of '.row'. It would be overkill generate the grid-component twice just to change that.

As .columns have their width defined in percent they are always relative to the width of .row. So instead of regenerating the grid, you could simply change the width of row at the breakpoints of your choice like this:

.row{
  width: $rowWidth;
  @media(min-width: $breakpoint-large){
    width: $rowWidthLarge;
  }
  @media(max-width: $breakpoint-tablets){
    width: $rowWidthTablets;
  }
  @media(max-width: $breakpoint-mobile){
    width: $rowWidthMobile;
  }
}