布局和地图

Question

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

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

1. 网格颜色不变。他们甚至没有显示第一张地图（对于更广的网格，它应该是黄色，然后是红色）。
2. 虽然网格列改变，我不认为列宽或排水沟宽度是正确的。作为一个例子，第一列似乎比第五列的第五列要大，因为它应该稍微短一些，而边界也不会更宽。这可能只是网格背景不够准确吗？
3. 当我达到975断点时，水槽应该比平板地图中定义的大，但看起来不是这样。

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

谢谢

Answer 1

我不知道网格图像的颜色是怎么回事。这看起来像一个错误。你能在GitHub上提出问题吗？

另外两个问题与您如何应用网格设置有关。就Susy而言，你的网格只用于容器（你明确地通过它们的地方）。 Susy不知道任何有关DOM或元素嵌套的知识，因此这些网格设置不会以任何真实的方式“传递”给孩子们。

有几种方法可以告诉span mixin要使用哪些网格设置。你可以明确地将它们传递给@include span(last 7 of $tablet);，或者你可以使用with-layout混入包一整群：

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