css - 如何在 Singularity 中为同一容器元素中的元素设置不同的宽度

Question

在Singularity的应用中，有几个方面我还有些疑惑。例如，我想知道一件事。在下面的要点中，我设置了一些简单的元素。底部的蓝色是页脚，中间的黄色是内容，上面的三个单元格(红色、绿色紫红色 - 由 grid-span 构建)构成页眉。所有这三个部分都由同一个容器构建。

http://sassmeister.com/gist/8010028

我想知道使 header 比其他两个更宽的最干净的方法是什么。

• 只为包装标题元素定义一个百分比宽度？
• 通过将布局混合应用到标题元素并设置一个全新的上下文？

或者如果它们都依赖于相同的容器设置和上下文，甚至不可能为三个之一设置不同的宽度？最好的问候拉尔夫

Answer 1

Singularity 与容器无关，因此您可以按照您喜欢的任何方式放置 header 容器。

有很多方法可以使其中一个容器变大，这个问题与 Singularity 无关。

我最喜欢的方法是负边距。它不适用于您的样式，因为您在容器上设置了 margin: 0 auto。我建议您在 body 上使用 margin: 0 auto。这将需要一些重构。

但与 Singularity 相关的是在不同宽度的容器中保持一致的网格的问题。您需要做一些数学运算，并花一些时间摆弄值。

这是我设法实现的:http://sassbin.com/gist/8030219/

请注意，我没有使用 layout 混合宏，只是重新定义了 $grids。不推荐这种方法，但当有多个不同的网格并且没有一个可以称为主要网格时可以接受。

请注意，SassMeister 在 Sass 3.3 上运行，而 Singularity 和 Breakpoint 在 Sass 3.3 上运行不正常。请改用 SassBin.com，它保留在 Sass 3.2 上。