Susy grid：按位置定位元素不起作用答案

【问题标题】：Susy grid: position element by location not workingSusy grid：按位置定位元素不起作用
【发布时间】：2014-09-15 21:07:21
【问题描述】：

试图找出 Susy，但在按位置定位元素时遇到问题。 “first”和“last”按预期工作，但使用特定列的编号却不行。我哪里错了？

.number {
  @include span(4 at 5);
}

查看演示：http://sassmeister.com/gist/aad8a46d927b59573695

或完整代码：

  @import "susy";

  $susy: (
    flow: ltr, // ltr | rtl
    output: float, // float | isolate
    math: fluid, // fluid | static (requires column-width)
    column-width: false, // false | value
    container: 800px, // length or % | auto
    container-position: center, // left | center | right | <length> [*2] (grid padding)
    last-flow: to,
    columns: 12,
    gutters: .75,
    gutter-position: after, // before | after | split | inside | inside-static (requires column-width)
    global-box-sizing: content-box, // content-box | border-box (affects inside/inside-static)
    debug: (
      image: show,
      color: rgba(#66f, .25),
      output: background, // background | overlay
      toggle: top right,
    ),
    use-custom: (
      background-image: true, // look for background-image mixin
      background-options: false, // look for background-size, -origin and -clip and other compass/bourbon mixins
      box-sizing: true, // look for custom bix sizing mixin
      clearfix: false, // true = look for internal clearfix before using micro clearfix
      rem: true, // look for rem mixin
    )
  );


  .page {
    @include container;
  }

  .row {
    @include full;
  }

  .first {
    @include span(4);
    background-color:pink;
  }

  .last {
  @include span(last 4);
  background-color:orange;
}

.number {
  @include span(4 at 5);
  background-color: wheat;
}


<div class="page">
    <div class="row">
      <div class="first">hooray I'm first</div>
      <div class="last">hooray I'm last</div>
    </div>
    <div class="row">
      <div class="number">boo I'm not at my specific location</div>
    </div>
</div>

【问题讨论】：

问题中需要有足够的代码来重现问题。此外，还不清楚在这种情况下“不起作用”是什么意思（编译器错误？应该是绿色的时候是红色的？格式化你的硬盘驱动器？等等）。
@cimmanon 请参阅演示链接以获取完整编码示例。 “不起作用”意味着元素不会将自身定位在第 5 列，而是保持与演示代码中所示的左侧齐平。
这不是 SO 的工作方式。同样，问题中需要有足够的代码来重现问题。链接失效，一旦你的演示消失，这个问题对任何人都没有用。
我很抱歉，因为链接到一个小提琴（或者在这种情况下是一个支持等效的 sass）已经足够了，我每隔一段时间发布一次，几乎在我读过的每个线程中。

标签： grid sass position location susy

【解决方案1】：

刚刚意识到我的错误（以防其他人需要它）：“at”关键字仅适用于隔离输出，并且我的网格设置为浮动。要解决此问题，您可以在整体设置中更改浮动以隔离，或将其直接应用于相关元素。

.number {
  @include span(isolate 4 at 5);
}

http://sassmeister.com/gist/42d1efaf1ddd9c721379

【讨论】：

我也遇到了同样的事情，谢谢你的解决方案。刚从 Susy 开始，这显然是初学者对使用 at 标志的误解。
另外，混淆主要是因为看过this video tutorial from LevelUpTuts实际上是为初学者准备的。 Check this gist 看到视频中的设置以及您所做的，at 标志仅适用于隔离设置。
我开始相信at 标志可以用于like in this video tutorial from LevelUpTuts about Susy。偶然4 at 9 of 12 在侧边栏上工作，（在视频中从 6 分 18 秒开始）sidebar 与列的其余部分完全一样宽。与您的问题类似。一旦选择了剩余列的任何其他值atwill not work，output:isolate 全局或 span(isolate ..) 设置除外。