Grid Susy栅格:按位置定位元素不工作

Grid Susy栅格:按位置定位元素不工作,grid,sass,position,location,susy,Grid,Sass,Position,Location,Susy,试图找出苏西,我在按位置定位元素时遇到了麻烦。”“first”和“last”按预期工作,但使用特定列的编号则不行。我哪里做错了 .number { @include span(4 at 5); } 请参见演示: 或完整代码: @import "susy"; $susy: ( flow: ltr, // ltr | rtl output: float, // float | isolate math: fluid, // fluid | static (re

试图找出苏西,我在按位置定位元素时遇到了麻烦。”“first”和“last”按预期工作,但使用特定列的编号则不行。我哪里做错了

.number {
  @include span(4 at 5);
}
请参见演示:

或完整代码:

  @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>
@import“susy”;
$susy:(
流:ltr,//ltr | rtl
输出:float,//float |隔离
数学:流体,//流体|静态(需要列宽)
列宽:false,//false |值
容器:800px,//长度或%|自动
容器位置:中,//左|中|右|[*2](网格填充)
最后一个流程是:,
栏目:12,
排水沟:.75,
檐槽位置:after、//before | after | split | inside | inside static(需要列宽)
全局框大小:内容框,//内容框|边框框(影响内部/内部静态)
调试:(
图片:show,
颜色:rgba(#66f,.25),
输出:background,//background | overlay
切换:右上角,
),
使用自定义:(
背景图像:true,//查找背景图像混合
背景选项:false,//查找背景大小、-origin和-clip以及其他指南针/波旁混音
框大小:true,//查找自定义bix大小混合
clearfix:false,//true=在使用micro clearfix之前查找内部clearfix
rem:true,//查找rem mixin
)
);
.第页{
@包括集装箱;
}
.行{
@包括全部;
}
.首先{
@包括跨度(4);
背景颜色:粉红色;
}
.最后{
@包括跨度(最后4个);
背景颜色:橙色;
}
.号码{
@包括跨度(5处4);
背景色:小麦;
}
万岁!我是第一个
万岁,我是最后一个
boo我不在我的特定位置
刚刚意识到我的错误(以防其他人需要):关键字“at”仅适用于隔离输出,而我的网格设置为浮动。若要修复此问题,可以在整体设置中更改float以隔离,或将其直接应用于相关图元

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

问题中需要有足够的代码来重现问题。此外,还不清楚在此上下文中“不工作”是什么意思(编译器错误?当它应该为绿色时为红色?格式化硬盘驱动器?等等)。@cimmanon请参阅演示链接以了解完整的编码示例。“不工作”意味着元素本身不在第5列,而是保持左对齐,如演示代码所示。这不是工作原理。同样,问题中需要有足够的代码来重现问题。链接腐烂,一旦你的演示消失了,这个问题对任何人都没有用处。好吧,我的道歉是,我每隔一段时间发布一次链接到小提琴(或者在本例中是一个支持sass的等效工具)就足够了,在我读过的几乎每一篇文章中都足够了。如果同样的事情发生在我身上,谢谢你的解决方案。刚从Susy开始,这是一个明显的初学者对使用
at
标志的误解。另外,混淆主要是因为观看了实际上是为初学者准备的。为了了解视频中的设置以及您所做的操作,
at
标志仅在隔离设置打开时起作用。我开始相信可以使用
at
标志。碰巧12个中的9个
4在侧边栏上起作用(在视频中从6分钟18秒开始),因为
侧边栏的宽度与列的其余部分完全相同。你的问题也是这样。在
处选择剩余列的任何其他值后,除了使用
输出:隔离全局或
span(隔离..)
设置外。