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

Question

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

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

我怎样才能做到这一点？

我不能只更改的高度值.topbar，因为 Foundation 在顶部栏及其子元素的许多其他属性（行高、填充、边距等）中使用了这个变量。

score 2 · Accepted Answer

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

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

也许不是最干净的方法（我必须检查这是否会产生多余的 CSS），但我更喜欢这个，即使我认为@James 的回答也很好（对于所产生的 CSS 而言，它甚至可能是一种更干净的方法）。

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

score 1 · Accepted Answer

开箱即用的 Foundation 无法做到这一点。我过去做过两件事来获得这样的自定义功能：

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

或者

2) 将 mixins 和 html 类生成 Sass 从 zurb-foundation gem（例如foundation/components/top-bar.scss）复制到 app.scss 或新文件，然后修改 app.scss，这样您就不再通过注释掉来使用总括导入

// @import "foundation";

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

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

完成此操作后，您可以修改 html 生成或 mixins 或为您想做的任何事情添加媒体查询。

请记住，如果您进行这样的修改，它可能会与 Zurb Foundation 的未来版本中断。

2 回答 2