我正在建立一个公司响应网站,并首次使用SASS和Foundation 4 CSS Framework.到现在为止还挺好.
但是我在这里遇到了一个与“mixin”有关的“问题”.
如果我想在大视图中使用大小为6的列,在小视图中使用大小为3的列,我可以使用内置的CSS类
class="large-6 small-3 columns"
有没有办法通过Foundation SASS mixin来做到这一点？我发现here列的唯一混合物是
@include grid-column($columns,$last-column,$center,$offset,$push,$pull,$collapse,$float);
而对于我得到的,我不能在这里指定veiwports.
有什么想法吗？
先感谢您
最佳答案
我做了一些mixins以便更容易处理：
https://gist.github.com/jofralogo/5324278
原文链接：https://www.f2er.com/html/426623.htmlhttps://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.
