Zurb foundation 基于媒体查询的不同顶栏高度

我已将

$topbar height

变量设置为高于默认值的特定值

对于移动版本，我希望保留默认值

我该怎么做

---

我不能仅仅改变TopBar < /C>的高度值，因为这个变量被TopBar和它的子元素（线高度、填充、边距等）的许多其他属性所使用。我在过去做了两件事来获得自定义功能，例如：

1） 通过附加来覆盖app.scss中的CSS类！强制更改生效非常重要

或

2） 从zurb foundation gem复制了mixin和html类生成Sass（例如

foundation/components/top bar.scss

） 转到app.scss或新文件，然后修改app.scss，以便通过注释将其删除，不再使用一揽子导入

// @import "foundation";

以及导入所有其他内容（用于开发，但仅限于生产所需的部分），但要覆盖的文件除外（在本例中）

// @import "foundation/components/top-bar";

一旦您这样做了，您就可以修改html生成或混合，或者为您想要做的任何事情添加媒体查询

---

请记住，如果你做出这样的修改，它可能会打破Zurb基金会的未来版本。

< P>我发现，做这样的事情是有效的：

@media #{$small} {
  $topbar-height: 85px;
  @import "foundation/components/top-bar";
...
}

也许不是最干净的方法（我必须检查这是否产生冗余CSS），但是我更喜欢这个，即使我认为@杰姆斯也回答得很好（很可能这是对产生的CSS的一种更清洁的方式）。

---

我认为一个实际的

顶栏可以解决这个问题：我将添加它作为一个建议。
+1-这是可行的，尽管我同意它可能会创建一堆冗余的CSS。如果高度可以在多个断点处配置就好了，不仅仅是总体上。我也希望这样做，但是改变颜色而不是高度。下面是您的答案，考虑到这是3年后的事，而且移动目标tar是web标准，仍然是最好的方法。。。