Question

我有一个项目，在不同的断点处有不同的布局，我努力让地图部分工作。我在http://sassmeister.com/gist/ef02247af9f901fb3897

设置了一个示例

您会看到我有两张地图，每张地图都有不同的网格设置和调试颜色。但我有几个问题：

网格颜色没有变化。它们甚至没有显示在第一张地图上（对于更宽的网格，它应该是黄色，然后是红色）。
虽然网格列发生了变化，但我并不认为列宽或沟槽宽度是正确的。作为一个示例，第一列似乎比网格第五列更大，当它应该稍微短一点并且边距似乎也不宽。这可能只是网格背景不够准确吗？
当我到达975断点时，排水沟应该比平板电脑地图中定义的更大，但它看起来并不像。

有关使正确的地图在不同断点处运行所需的任何想法。我是否需要在各个断点处清除/重置地图？

由于

Answer 1

我不确定网格图片颜色是怎么回事。这似乎是一个错误。你能在GitHub上提出问题吗？

其他两个问题与您应用网格设置的方式有关。就Susy而言，您的网格仅用于容器（显式传递它们的位置）。 Susy对DOM或元素嵌套一无所知，因此这些网格设置不会传递给＃34;以任何真实的方式给孩子们。

有几种方法可以告诉span mixins要使用哪种网格设置。你可以明确地传递它们，例如@include span(last 7 of $tablet);，或者您可以使用with-layout mixin来包装整个组：

  @include breakpoint(760px) {
    @include with-layout($tablet) {
      @include container;
      .column1 {
        @include span(5);
      }
      .column2 {
        @include span(last 7);
      }
    }
  }

或者你可以使用susy-breakpoint，这是一个快捷方式：

  @include susy-breakpoint(760px, $tablet) {
    @include container;
    .column1 {
      @include span(5);
    }
    .column2 {
      @include span(last 7);
    }
  }

我没有在容器或跨度中添加上下文，因为Susy将采用默认的全局上下文，在这些示例中由with-layout和susy-breakpoint设置。

布局和地图

1 个答案: