我正在构建一个公司响应式网站，并首次同时使用 SASS 和 Foundation 4 CSS 框架。到目前为止，一切都很好。 但是，我在这里遇到了 mixins 的“问题”。 如果我想要一个在大视图中大小为 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。
有什么想法吗？ 提前谢谢你
【问题讨论】：
标签： html css responsive-design sass zurb-foundation
对于这些你应该使用语义类。
class="something-descriptive"
在你的 sass 中包含不同大小的不同 mixin，如下所示：
.something-descriptive {
@include grid-column(3)
}
@media screen and (min-width: 700px) {
.something-descriptive {
@include grid-column(6)
}
}
【讨论】：
@include small-grid-column(6)这样的明确的东西，但他们确实提供了变量，所以人们可以写@media #{$small} { .something-descriptive { @include grid-colum(6) } }——在这里读到最后：@ 987654321@
但我想知道的是他们是否有内置的 SASS 混入。不过我会检查他们的@media 设置并尝试自己实现。
不，他们没有。 :( 见文档：http://foundation.zurb.com/docs/media-queries.html
但你不需要发明任何东西！只需使用漂亮的respond-to Compass 扩展程序Snugug。
除了按照响应的自述文件中描述的名称调用媒体查询之外，您还可以通过它们的编号来触发它们。
干净缩进语法中的示例：
// 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)
耶！
【讨论】：
使用 Sass Mixins，您必须使用媒体查询来显式更改网格。我解决这个问题的方法是创建一个 Mobile First 站点，然后将定义网格的 Sass 代码复制到 2 个媒体查询中，如下所示：
// Mobile Grid
@media only screen and (max-width: 768px) { ... }
// Desktop & Tablet Grid
@media #{$small} { ... }
我找不到任何明确的例子来说明它是如何工作的。根据我收集到的信息，您应该能够在 Sass 中定义网格，然后仅使用 @media #{$small} {} 媒体查询覆盖它，但实际上我无法让它工作。我尝试在另一个网格之前、之后等进行媒体查询，结果是第一次设置网格时它保持不变。
这是一个更长的例子。在#dashboard 的情况下，它在移动设备上堆叠并居中，在台式机/平板电脑上以 3 列为中心。这将是 class="small-10 small-centered large-4 columns" 用于使用演示类。
// Mobile Grid
@media only screen and (max-width: 768px) {
#dashboard { @include grid-row;
& > #stats { @include grid-column(10, false, true); }
& > #records { @include grid-column(10, false, true); }
& > #results { @include grid-column(10, false, true); }
}
}
// Desktop & Tablet Grid
@media #{$small} {
#dashboard { @include grid-row;
& > #stats { @include grid-column(4, false, false); }
& > #records { @include grid-column(4, false, false); }
& > #results { @include grid-column(4, false, false); }
}
}
注意：您可以对此进行扩展并使用 mixins 设置更多断点，但这似乎模拟了默认的 Zurb F4 表示类行为。
【讨论】：
我制作了一些 mixin 以便于处理： 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：在窗口宽度为 768 像素及以上时覆盖 $phone-grid 的网格列数。
即：
@include rgrid(3,6); => 3 columns for phone, 6 columns for desktop.
@include rgrid(6); => 6 columns.
【讨论】：
我认为您可以通过 @extend 一个 Foundation 类而不是 @include 一个 Foundation 混合来获得它。这样，您就可以获得 Foundation 构建到其网格类中的所有内容，以及堆叠它们的能力。
在 CSS 中分配你想要的类：
.my-super-semantic-div {
@extend .large-6, .small-3, .columns;
}
而不是在 HTML 中：
<div class="large-6 small-3 columns">...<div>
【讨论】：
@extend .large-6, .small-3, .columns;