如何為12列Susy網格指定2.5％的裝訂線

Question

我有一個具有兩個不同網格設置的移動優先網站。 直到600px：

$sm-screen-grid: (
  columns: 5,
  gutters: 1 / 3
);

這些裝訂線顯示為2.5％的填充，仍然試圖弄清楚該如何精確計算。 600之后，我切換到12列網格。 我的問題是我希望裝訂線寬度仍為2.5％。 我似乎無法弄清楚要為裝訂線指定什么值，因此它呈現為：

padding-left: 2.5%;
padding-right: 2.5%;

換一個容器。

有什么建議嗎？

Answer 1

Susy的數學根據裝訂線位置而變化。 根據該輸出，我猜您正在使用inside設置。 那數學看起來像：

// target-width / context-width * 100%
$single-gutter: $gutters / ($columns + ($gutters * $columns)) * 100%;

在您的情況下，該方程式的結果為5% ，分為左右邊填充–分別為2.5% 。 據我所知，一個12列的網格需要將裝訂線設置為1.5才能獲得相同的結果。 這意味着，要保持精確的2.5% ，您的裝訂線將比列大。

請記住，填充百分比是根據包含的元素而不是要填充的元素計算的。 因此，保持%相同將不會使列與裝訂線的比率保持相同。 如果嘗試使裝訂線始終2.5%列的2.5% ，則應將裝訂線設置更改為.25並保留在該位置。 輸出百分比將改變，但列與裝訂線的比率對於任何數量的列都將保持不變。