3

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

我从官方的 Susy 教程index.html中获取了和，编译了 SCSS 并将它放在我的服务器上。如您所见，它看起来就像它应该的那样（在我测试过的所有浏览器上）：screen.scss

在此处输入图像描述

我接下来要做的是：

  • 复制<article>并<div role="main">粘贴六次
  • 在screen.scss中，相应地更改列跨度 ( div[role="main"] > article)：从@include columns(6,9);到@include columns(1,9);

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

在此处输入图像描述

我这里也上传了源码供大家查看。

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

4

1 回答 1

5

Susy 不像其他所有网格系统一样只是另一个网格系统。它旨在实现一个非常特定的目的：内部流动的网格。用于创建网格的单位将应用于容器，而不是每列。里面的一切都是用百分比构建的。你看到的很正常。由于亚像素舍入，所有流体网格都是如此。这不是错误，它是构建响应式网站的一部分。

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

重新调整浏览器的大小，看看它是如何工作的。您会注意到网格对齐并浮动在其参考线的几个像素内，但网格保持完整并且永远不会触发水平滚动条。

干杯!

-e

于 2012-02-14T07:20:53.893 回答