Question

我已将$topbar-height变量设置为特定值，该值高于默认值。

对于移动版本，我想保留默认值。

我该怎么做？

我不能只改变.topbar的高度值，因为这个变量被Foundation用于顶部栏及其子元素的许多其他属性（行高，填充，边距等）。 / p>

Answer 1

我发现做这样的事情很有效：

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

也许不是最干净的方法（我必须检查这是否会产生冗余的CSS）但我更喜欢这个，即使我认为@James的答案也很好（可能它甚至更清楚地解决了生成的CSS的问题）。

我认为实际的top-bar mixin可以解决这个问题：我会将其添加为建议。

Answer 2

开箱即用的基金会无法做到这一点。我过去做了两件事来获得自定义功能，例如：

1）通过附加！important来覆盖app.scss中的CSS类，以强制更改生效。

或

2）从zurb-foundation gem复制了mixins和html类生成Sass（例如foundation/components/top-bar.scss） app.scss或新文件，然后修改app.scss，以便你不再通过评论来使用一揽子导入

// @import "foundation";

并导入其他所有内容（用于开发，但仅用于生产所需的部分），但要覆盖您要覆盖的文件的例外情况，在这种情况下

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

一旦你这样做，你可以修改html生成或mixins或添加媒体查询，无论你想做什么。

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