我一直在试用 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 的普遍问题还是我做错了什么？如果是第一个，有人知道解决方法吗？我也尝试过使用百分比和像素，但都没有用。
最佳答案
Susy 与其他所有系统一样，不仅仅是另一个网格系统。它旨在实现一个非常具体的目的:网格 fluid on the inside .您用于创建网格的单位应用于容器，而不是应用于每一列。里面的一切都是用百分比构建的。你所看到的是正常的。所有流体网格都是如此，因为 sub-pixel rounding .这不是错误，而是构建响应式网站的一部分。
如果您需要精确到像素的网格，Susy 是不适合您的工具。这完全取决于您要构建的内容。
重新调整浏览器大小以查看其工作原理。您会注意到网格捕捉并 float 在其指南的几个像素内，但网格保持完整并且永远不会触发水平滚动条。
干杯!
-e
关于sass - 无法让基于 Susy 的网格正确对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9266542/