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

Question

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

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

所以这很好但只有在激活大型媒体查询时才能正常工作。当我调整窗口大小以激活中小型媒体查询时，此.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;
    }
}

小声明影响其上方的所有内容（中等，大）。