sass - 无法让基于 Susy 的网格正确对齐

Question

我一直在试用 Susy Compass 的插件( SASS )，但我注意到它没有按我的预期工作。

我拿了index.html和 screen.scss来自 official Susy tutorial , 编译 SCSS 并将其放在 my server 上.如您所见，它看起来就像它应该的那样(在我测试过的所有浏览器上):

接下来我做了以下事情:

• 复制 <article>在<div role="main">粘贴六次
• 在 screen.scss , 相应地更改列跨度 ( div[role="main"] > article ): 来自 @include columns(6,9);至 @include columns(1,9);

但现在这些新元素根本不与网格对齐，它们偏离了一个清晰可见的空间。我在最近版本的 FF、Safari 和 Chrome 中对此进行了测试，似乎只有 FF 可以正确显示它。屏幕截图来自 Chrome:

我也上传源码给大家查看here .

网格不正确是 Susy 的普遍问题还是我做错了什么？如果是第一个，有人知道解决方法吗？我也尝试过使用百分比和像素，但都没有用。

Answer 1

Susy 与其他所有系统一样，不仅仅是另一个网格系统。它旨在实现一个非常具体的目的:网格 fluid on the inside .您用于创建网格的单位应用于容器，而不是应用于每一列。里面的一切都是用百分比构建的。你所看到的是正常的。所有流体网格都是如此，因为 sub-pixel rounding .这不是错误，而是构建响应式网站的一部分。

如果您需要精确到像素的网格，Susy 是不适合您的工具。这完全取决于您要构建的内容。

重新调整浏览器大小以查看其工作原理。您会注意到网格捕捉并 float 在其指南的几个像素内，但网格保持完整并且永远不会触发水平滚动条。

干杯!

-e