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

css, html, responsive-design, sass, zurb-foundation

Solution

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.

Problem

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

Original source