从 SASS 列表变量中获取值（但不是键）

Question

我想要一个导航栏，将内容缩放到全局站点媒体查询中定义的当前断点，但我似乎无法正确定位 SASS 列表中的项目。

HTML

<div class="contain-header">
    <header class="top-bar">
        <!--nav here-->
    </header>
</div>

全局设置(SASS)

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

因此，当屏幕小于 1200 像素时，导航内容的 max-width 为 1024px。

SASS（不工作）

.contain-header {
    .top-bar {
        margin: 0 auto;
        @each $item in $breakpoints {
            @include breakpoint(#{$item}) {
                max-width: #{$item};
            }
        }
    }
}

这会导致编译错误：

WARNING: breakpoint(): "small 0" is not defined in your $breakpoints setting.

（对 $breakpoints() 中的每个项目重复）

那么我如何调用 #{item} 以便输出 medium 640px 而不是输出 640px （或 medium 就此而言）？以及如何更改 max-width: #{$item}; 以定位 $item - 1 的值？

N.B。我正在使用 Foundation，其中 @include breakpoint(){} 是一个将 css 包装在媒体查询中的混音 & $breakpoints() 是框架的变量之一 (http://foundation.zurb.com/sites/docs/media-queries.html#sass).

Answer 1

尝试使用 @each $key, $value in $breakpoints 并省略插值：

.contain-header {
  .top-bar {
    margin: 0 auto;
    @each $key, $value in $breakpoints {
      @include breakpoint($key) {
        max-width: $value;
      }
    }
  }
}

从 SASS 列表变量中获取值（但不是键）

Getting the value (but not key) from SASS list variable

sass

zurb-foundation

zurb-foundation-6