在 Foundation 中更改断点

Question

嘿，人们在更改顶部导航的断点时遇到问题，它会切换到下拉菜单。

这是我使用 Foundation 4.0 的第一个项目。我找到了这个

* Transitions and breakpoint styles */
$topbar-transition-speed: 300ms;
$topbar-breakpoint: emCalc(940); /* Change to 9999px for always mobile layout */
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";

但我不确定如何实现.. 我还没有使用 Sacss.. 最终。 .

Answer 1

您似乎使用的是旧版本的 Foundation。现代版本的变量声明中有!default 标志：https://github.com/zurb/foundation/blob/210d58068b70112e6b5cbb133e6d70cbab70efe2/scss/foundation/components/_top-bar.scss#L54

!default 标志允许您通过在导入库之前设置变量来覆盖变量：

$topbar-breakpoint: 400px;
@import "foundation";

结果：

@media only screen and (min-width: 400px) {
  .top-bar {
    /* … */
  }
  /* … */
}