如何在 Foundation 5 中创建适用于所有媒体查询的自定义网格？

Question

我需要能够创建超过默认 12 列的自定义网格，我可以将这些列应用到标记中的不同元素（例如页眉、页脚、部分等）。在我的研究过程中，我发现了一种通过创建这样的混合来实现此目的的方法：

.app-navbar {
  $total-columns:18;
  @include grid-row();
  @include grid-html-classes($size:large);
    .columns {
        padding: 0;
    }
}

所以这工作正常，但只有当大型媒体查询被激活时。当我调整 window 的大小以激活中型和小型媒体查询时，此 .app-navbar 消失并返回到默认的 Foundation 12 列网格。我知道发生这种情况是因为我将 $size: large 传递给 grid-html-classes()。我怎样才能使这个 18 列的网格应用于我所有的媒体查询（小型、中型和大型）？

Answer 1

如果你想在媒体查询中包装你的样式，方法如下：

@media #{$small-up} { insert styles here }

您试过这样编辑代码吗？

.app-navbar {
  $total-columns:18;
  @include grid-row();
  @include grid-html-classes($size:small);
    .columns {
        padding: 0;
    }
}

小声明影响它上面的所有内容（中、大）。

如何在 Foundation 5 中创建适用于所有媒体查询的自定义网格？

How to create custom grids in Foundation 5 that apply to all media queries?

css

sass

zurb-foundation