如何为 12 列 Susy 网格指定 2.5% 的装订线答案

【问题标题】：How to specify 2.5% gutters for a 12 Column Susy Grid如何为 12 列 Susy 网格指定 2.5% 的装订线
【发布时间】：2017-12-02 02:38:51
【问题描述】：

我有一个具有两种不同网格设置的移动优先网站。直到 600 像素：

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

那些排水沟显示为 2.5% 的填充，仍在试图弄清楚它是如何计算的。在 600 之后，我切换到 12 列网格。我的问题是我希望排水沟宽度仍为 2.5%。我似乎无法弄清楚要为排水沟指定什么值，所以它呈现为：

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

一个容器。

有什么建议吗？

【问题讨论】：

标签： css sass susy

【解决方案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%，则应将装订线设置更改为.25 并将其保留在那里。百分比输出会发生变化，但列与装订线的比率将与任何列数保持相同。

【讨论】：

非常感谢您对此的解释。我疯狂地试图找出这一切如何与 Susy 一起工作。我看过一些视频，但认为其中任何一个都没有详细解释这一点。能否请您指导我一些资源，以便我更好地理解这些事情？
我不确定是否存在一个好的资源。也许我应该写一个？
那太好了，因为排水沟的计算对我来说是最令人困惑的部分，我相信这不是那么令人困惑，只是没有足够的资源来解释这一点。