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

html–Zurb Foundation 4 SCSS mixins适用于小型和大型(流体响应)色谱柱,第1张

概述我正在建立一个公司响应网站,并首次使用SASS和Foundation 4 CSS Framework.到现在为止还挺好.但是我在这里遇到了一个与“mixin”有关的“问题”.如果我想在大视图中使用大小为6的列,在小视图中使用大小为3的列,我可以使用内置的CSS类 class='large-6 small-3 columns' 有没有办法通过Foundatio

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

 

有没有办法通过Foundation SASS mixin来做到这一点?我发现here列的唯一混合物是

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

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

有什么想法吗?
先感谢您最佳答案我做了一些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.
总结

以上是内存溢出为你收集整理的html – Zurb Foundation 4 SCSS mixins适用于小型和大型(流体/响应)色谱柱全部内容,希望文章能够帮你解决html – Zurb Foundation 4 SCSS mixins适用于小型和大型(流体/响应)色谱柱所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1125098.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存