国旗在哪里？答案

【问题标题】：How does the flag at?国旗在哪里？
【发布时间】：2015-10-10 13:06:51
【问题描述】：

有一个网格跨度（12）

有两个文本块

.main-container
    .content text text text text text text text text text 
    .sidebar text text text text text text text text text

想这样做

写代码

span(6 at 1) //
span(3 as 9) //

但不要得到想要的。这是整个代码。

$debug: (image: show, color: rgba(#66f, .25), output: background, toggle: top right)

$susy: (columns: 12, gutters: 1/4, math: fluid, gutter-position: inside, debug: $debug)

.main-container
    @include container(80%)

.content
    width: 100%
    height: 100%
    @include span(6 at 1)

.sidebar
    width: 100%
    height: 100%
    @include span(3 at 9)

我认为标志at 正是为此目的而设计的。但实验表明我错了。关于这个问题 - 如何使用标志 at？如何使用at 达到预期的效果？

【问题讨论】：

标签： sass susy susy-sass

【解决方案1】：

at 标志仅以这种方式用于隔离输出 ('output': 'isolate')。那是因为浮动是相对的，除非你隔离它们，否则 Susy 不知道它们的原始位置。隔离在某些情况下很有用，但最好在需要时使用push 和pull 将浮动元素移动到相对位置。像这样的：

.content {
  height: 100%;
  @include span(6);
  @inlcude push(1);
}

.sidebar {
  height: 100%;
  @include span(3);
  @include push(1);
}

如果你确实使用隔离，它会是这样的：

.content {
  height: 100%;
  @include span(isolate 6 at 2); // position is 1-indexed
}

.sidebar {
  height: 100%;
  @include span(isolate 3 at 9);
}

我删除了width: 100%，因为span 无论如何都会覆盖宽度。

【讨论】：