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

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;
  }
}