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,
);

所以当屏幕是＆lt; 1200px，导航内容的max-width为1024px。

SASS（不工作）

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

这会导致编译错误：

警告：断点（）：＆＃34;小0＆＃34;未在$ breakpoints设置中定义。

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

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

的值

N.B。我使用的是基础，其中@include breakpoint(){}是一个mixin，它将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列表变量中获取值（但不是键）

1 个答案: