旗幟如何？

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覆蓋寬度反正。