Databases
StackOverflow2013
Postsdbo
POUsing Zurb Foundation, how can I create breakpoints in my grid size without a deprecation warning?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing Zurb Foundation, how can I create breakpoints in my grid size without a deprecation warning?
    text
    copied!<p><strong>tl;dr;</strong> I've implemented a way to <em>regenerate</em> Foundation's grid <em>inside</em> media queries. But it results in a Sass deprecation warning. Is there a better implementation to accomplish my goal?</p> <p><strong>The goal</strong></p> <p>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 <em>small</em> 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.</p> <p><strong>What I'm doing</strong></p> <p>I've implemented a simple way to create my own additional breakpoints in the responsive grid for my project. <em>Inside</em> a media query (for large desktops for example) I change the grid width to 1200px <em>and then</em> I <code>@import "foundation/components/grid";</code> again inside this query. This effectively regenerates the grid (with a larger size) <em>inside</em> the media query for large desktops.</p> <p>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.</p> <p><strong>The specific warning</strong></p> <blockquote> <p>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.</p> </blockquote> <p><strong>Steps to reproduce / code sample</strong></p> <ol> <li><p>Created a Foundation project</p></li> <li><p>Included my own partial named <code>_theme.scss</code> and included that in <code>app.scss</code>. (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.)</p></li> <li><p>In my <code>_theme.scss</code> I have some media queries. One example is:</p> <pre><code>// LARGE DESKTOP &amp; 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; } } </code></pre></li> </ol> <p>The issue comes into play where in "_grid.scss" we use an "@extend" directive on line 29 as seen below:</p> <pre><code>// Creating .row-# classes @for $i from 1 through $totalColumns { .row { .#{convert-number-to-word($i)} { @extend .#{convert-number-to-word($i)}; } } } </code></pre> <p>Because this is imported inside my media query I get the warning (above).</p> <p>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!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload