使用Susy的跨度函數的嵌套分水槽

Question

Susy是否使用span函數而不是mixin爲內置分水線父母的孩子建立了一個內置方法？這裏的孩子結束了陰溝裏短（如預期）：

$susy: (columns: 8, gutters: 0.3, global-box-sizing: border-box, gutter-position: split) 


.full_width 
    width: span(5) 

.three_columns 
    width: span(3 of 5) 

添加排水溝手動 - width: span(3 of 5) + gutter() - 或改變排水溝風格 - width: span(3 of 5 after) - 都得到正確的結果，但我不知道是否有一個更直覺的方式，除了寫我自己的nested-span函數來包裝其中之一。

Answer 1

Susy的分水槽網格預計父元素會超寬（跨越自己的排水溝），並且孩子會變窄（使用排水溝將其推入到位）。如果您在父項上使用nest，那麼mixin將自動處理這些內容 - 例如， span(5 nest)。

就你而言，這個孩子實際上並沒有錯過一個陰溝 - 數學是錯誤的。 Susy正在計算span/wide-container，但你的容器實際上並不寬。錯誤幾乎是一個排水溝的寬度，但不完全。添加陰溝會讓你關閉，但這不準確。

after語法的工作原理很完美，因爲後裝訂程序需要一個正常寬度的容器，這就是您所擁有的。基本上，你告訴Susy分割span/container而不是span/wide-container。

我放在一起some examples on codepen - 你有什麼，什麼蘇西期待，以及如何after黑客的作品。

Susy 2.x沒有更好的方法來處理這種情況，因爲它不是預期的用例。 Susy 3.x將允許您分開控制父母和孩子的傳播（狹窄或廣泛），以便在任何情況下獲得所需的數學。