Zurb Foundation 4 SCSS mixins for small and large(fluid/responsive) columns

Question

I'm building a company responsive website and using both SASS and Foundation 4 CSS Framework for the first time. So far so good. However I'm having a "problem" here with mixins. If I want a column with size 6 in large views and size 3 in small views, I can use built-in CSS classes

 class="large-6 small-3 columns"

Is there any way to do this via a Foundation SASS mixin? The only mixin for columns I found here is

@include grid-column($columns, $last-column, $center, $offset, $push, $pull, $collapse, $float);

And for what I get, I cannot specify veiwports here.

Any thoughts? Thank you in advance

Answer 1

I made some mixins to make easier to deal with that: https://gist.github.com/jofralogo/5324278

@mixin rgrid($phone-grid:"",$desktop-grid:""){
    @extend .small-#{$phone-grid};
    @extend .large-#{$desktop-grid};
    @extend .columns;
}

This mixin provides an easy way to use the F4 grid classes and media-queries.

• $phone-grid: number of grid columns.

• $desktop-grid: number of grid columns that overrides $phone-grid for window width 768px and above.

• Only one parameter could be declared to define a value for every window width.

i.e.:

@include rgrid(3,6); => 3 columns for phone, 6 columns for desktop.
@include rgrid(6); => 6 columns.

Answer 2

I think you could get that by @extend a Foundation class instead of @include a Foundation mixin. That way you get everything that Foundation built into their grid classes, as well as the ability to stack them.

Assign the classes you want in the CSS:

.my-super-semantic-div {
    @extend .large-6, .small-3, .columns;
}

Instead of in the HTML:

<div class="large-6 small-3 columns">...<div>

Answer 3

But what I wanted to know was if they have a built-in SASS mixin for this. However I'll check their @media settings and try to implement it myself.

Nope, they don't. :( See documentation: http://foundation.zurb.com/docs/media-queries.html

But you don't need to invent anything! Just use the beautiful respond-to Compass extension by Snugug.

In addition to calling media queries by names as described in respond-to's readme, you can fire them by their numbers.

Example in the clean indented syntax:

// Declaring the breakpoint ranges
$breakpoints: 'xs' (0 400px), 's' (401px 600px), 'm' (601px 800px)

// Declaring a function to retrieve a breakpoint by number
@function bp($number)
  @return nth(nth($breakpoints, $number),1)

// Calling a media query traditionally by a name
.bar
  +respond-to('s')
    @include grid-column(6)

// Calling a media query by its number
.foo
  +respond-to(bp(2))
    @include grid-column(6)

Yay!