具有與Susy

Question

定位元素我有一大堆的HTML5定義，像這樣的文章：

<section class="applications"> 
     <article> 
      <a href="..."><img ... /></a> 
      <h2>...</h2> 
      <p>...</p> 
      <a ... class="appstore">...</a> 
     </article> 

每篇文章都有那些完全一樣的元素。使用Susy 2.x我想弄清楚如何放置東西，使圖像在左下方有空的空間（即第1列），然後在右邊，佔用剩餘的寬度頁面，我有一個垂直佈局，其中< h2>高於< p>高於< a class =「appstore」>。

你可以看到，我在這張照片尋找所需的格式：

我有造型工作，我想要的方式，但由於佈局...我很確定我現在必須使用'@include span'的東西，但是在玩了一個小時之後，我就不能正確地做對了。謝謝！

Answer 1

你從來沒有必須所有使用蘇西，但你當然可以。 :)

這是一個很常見的CSS問題，因爲我們經常使用浮動佈局，當他們從來沒有這樣的意圖。 Susy實際上只是一組幫助管理佈局數學的捷徑，但它無法修復CSS。首先在CSS中解決佈局問題，然後確定Susy可以幫助澄清和簡化代碼。

例如，下面是幾個CSS可能的解決方案，只是用花車：

// Option A 
// -------- 

.image-link { 
    float: left; 
    width: 24%; 
} 

.title, .description, .purchase { 
    float: right; 
    width: 75%; 
} 

// Option B 
// -------- 

.image-link { 
    float: left; 
    width: 24%; 
} 

.title, .description, .purchase { 
    margin-left: 25%; 
} 

// Option C 
// -------- 

article { 
    padding-left: 25%; 
} 

.image-link { 
    float: left; 
    width: 24%; 
    margin-left: -25%; 
} 

會有大量的使用絕對定位，額外的標記，或許多其他方法其他解決方案。到底你想要的工作哪一個你喜歡取決於，你有多大的控制了標記，等

與Susy的span()混入輸出浮動方向（默認情況下離開了，但是正確的，如果你使用last關鍵字），寬度和可選的某種排水溝。 mixins分別設置邊距或填充。或者，您可以完全跳過mixins並使用span()函數在您希望的任何位置進行網格計算。

// Option A 
// -------- 

.image-link { 
    @include span(1 of 4); 
} 

.title, .description, .purchase { 
    @include span(last 3 of 4); 
} 

// Option B 
// -------- 

.image-link { 
    float: left; 
    width: span(1 of 4); 
} 

.title, .description, .purchase { 
    @include pre(1 of 4); 
} 

// Option C 
// -------- 

article { 
    @include prefix(1 of 4); 
} 

.image-link { 
    @include span(1 of 4); 
    @include pull(1 of 4); 
} 

你也可以使用與Susy的isolation功能，或者一些其他的方法 - 所有這些組件簡單的包裝數學和CSS。不要讓Susy的抽象隱藏你在CSS中工作的事實，並且浮動只是浮動。