Zurb Foundation 4 SCSS mixins适用于小型和大型(流体/响应)色谱柱

Question

我正在建立一个公司响应网站,并首次使用SASS和Foundation 4 CSS Framework.到现在为止还挺好.但是我在这里遇到了一个与"mixin"有关的"问题".如果我想在大视图中使用大小为6的列,在小视图中使用大小为3的列,我可以使用内置的CSS类

 class="large-6 small-3 columns"

有没有办法通过Foundation SASS mixin来做到这一点？我在这里找到的唯一的mixin 是

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

而对于我得到的,我不能在这里指定veiwports.

有什么想法吗？先感谢您

Answer 1

我做了一些mixins以便更容易处理:https: //gist.github.com/jofralogo/5324278

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

这个mixin提供了一种使用F4网格类和媒体查询的简便方法.

• $ phone-grid:网格列数.

• $ desktop-grid:窗口宽度为768px及以上的覆盖$ phone-grid的网格列数.

• 只能声明一个参数来定义每个窗口宽度的值.

即:

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