0

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

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

  1. 网格颜色没有改变。第一张地图甚至没有显示它们（对于更宽的网格，它应该是黄色，然后是红色）。
  2. 尽管网格列发生了变化，但我认为列宽或装订线宽度不正确。例如，列 ONE 似乎比网格第五列大，而它应该稍微短一点，并且边距似乎也不宽。这可能只是网格背景不够准确吗？
  3. 当我到达 975 断点时，排水沟应该比平板电脑地图中定义的要大，但它似乎没有。

关于在不同断点运行正确地图所需的任何想法。我需要在不同的断点清除/重置地图吗？

谢谢

4

1 回答 1

1

我不确定网格图像颜色发生了什么。这似乎是一个错误。你可以在 GitHub 上提交问题吗？

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

有几种方法可以告诉spanmixins 使用什么网格设置。您可以将它们显式传递给 eg @include span(last 7 of $tablet);，或者您可以使用with-layoutmixin 来包装整个组：

  @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-layoutand设置。susy-breakpoint

于 2014-10-15T21:41:26.117 回答