Susy 2：固定寬度的側邊欄與流體主要內容區域

Question

使用Susy 2（候選版本），我試圖找出如何創建一個固定寬度的側邊欄的簡單流體佈局 - 無論是左側位置還是右側 - m很高興使用第一個和最後一個關鍵字。任何人都可以給我任何關於如何在Susy 2中做到這一點的指針？

謝謝！

Answer 1

根據您自己的具體情況，有幾種混合固定/流體佈局的方法。

1. 隔離邊欄。

   浮動隔離是保持浮動彼此獨立的一種很酷的方式。

   .side { 
       @include span(3 static isolate); 
   } 
   
   .main { 
       @include full; 
       padding-left: span(3 static wide); 
   } 
   
   // or... 
   
   .main { 
       margin-left: span(3 static wide); 
   } 
   

   span(3 static)將跨越3列，使用column-width設置/單位。添加isolate將設置負右邊距，以防止其佔用橫向空間。添加wide，將在該寬度中包含額外的排水溝。您也可以使用任意寬度，如200px。隨你便。

2. 完全移除邊欄。

   如果可以安全地從流中移除邊欄，有時最簡單的方法是將其定位到絕對位置，並將相同的填充添加到主內容中。使用Susy 2，可能看起來像這樣：

   .side { 
       position: absolute; 
       left: 0; 
       top: 0; 
       width: span(3 static); 
   } 
   
   .main { 
       padding-left: span(3 static wide); 
   } 
   

3. 使用佈局上下文hack。

   還有一些方法可以創建新的佈局上下文，以填充浮動後的剩餘空間。最簡單的是overflow: hidden;

   .side { 
       @include span(3 static); 
   } 
   
   .main { 
       overflow: hidden; 
   } 
   

   的，不好的一面是，如果你需要溢出的任何理由。還有其他的技術，具有其它hackey缺點，像這樣的：

   .main { 
       display: table-cell; 
       vertical-align: top; 
       width: 10000px; 
   } 
   

Answer 2

你不需要與Susy與固定側邊欄的整體佈局。你可以在你的主要內容區域（這將是你的「容器」）中使用Susy進行流體佈局，但是對於整體佈局，你可以簡單地使用普通的SCSS（甚至是CSS），但是你必須重複寬度而不是保留一個變量）：

$side-bar-width: 250px; // whatever width you want 

.side { 
    float: left; 
    width: $side-bar-width; 
} 

.main { 
    width: calc(100% - #{$side-bar-width}); 
} 

簡單得多。

該解決方案完全以CSS calc()函數爲中心。