Getting Semantic Grids scss foundation 4 to work - responsive-design

Question

I have 3 sections that collapse under the default breakpoint
but I do not know how to get it to collapse with my own css using scss.
default foundation grid that works well and collapses
<div class="row">
<div class="large-4 columns">...</div>
<div class="large-4 columns">...</div>
<div class="large-4 columns">...</div>
</div>
I tried below out but but it doesn't seem to collapse
<div class="container">
<div class="div1">...</div>
<div class="div2">...</div>
<div class="div3">...</div>
</div>
.container{
#include grid-row;
.div1 {
#include grid-column(4);
}
.div2 {
#include grid-column(4);
}
.div3 {
#include grid-column(4);
}
}

Answer 1

its because you are writing the SCSS for grid-row wrong.
#include grid-row();
Do NOT use #extend. that is NOT how foundation4 is made to be used... #extend just stuffs your styles into .row and .column and that is not what you want to do, instead you want to stick THOSE styles into your styles the reverse way using semantic code therefore you can change the code later in your SCSS and it updates later.
Here is the correct answer:
HTML
<div class="container">
<div class="div1">...</div>
<div class="div2">...</div>
<div class="div3">...</div>
</div>
SCSS
.container{
#include grid-row();
.div1, .div2, .div3 {
#include grid-column(12);
#media #{$medium-up} {
#include grid-column(4);
}
#media #{$large-up} {
#include grid-column(4);
}
}
}
Note: this is with foundation 5. You must create breakpoints. Your mobile breakpoint should have 12 columns if you want the whole view to collapse in mobile, or whatever you want. This is the same as
<div class="small-12 columns"> </div>
if you want 4 columns for medium and up you write:
<div class="small-12 medium-4 columns"> </div>
So to write that symantically without helper classes you write this:
<div class="myclassname"> </div>
and the SCSS code is:
.myclassname {
#include grid-column(12);
#media #{$medium-up} {
#include grid-column(4);
}
}

Answer 2

I was baffled by this, but then found out it is actually intended behavior. Here's a quote from the official Foundation grid documentation:
We kept media queries out of the code for our grid mixins. This will enable you to include the mixins inside of whatever breakpoint you'd like, putting you in complete control. If you want to create 10 breakpoints and shift the layout around between each one, by all means. If you want to use only the default breakpoints, we've got variables for that.

Answer 3

Use #extend instead.
.container{
#extend .grid;
div{
#extend .columns;
}
}
.div1 {
#extend .large-4;
}
.div2 {
#extend .large-4;
}
.div3 {
#extend .large-4;
}
I made a couple of mixins that works well and I think that makes it easier:
https://gist.github.com/jofralogo/5324278