旗帜如何？

Question

有一个网格间距（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实现预期的结果？

Answer 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覆盖宽度反正。