无论嵌套网格上下文如何，如何跨越多个列？

Question

我需要设置一个元素的宽度，该元素在我流畅的 Susy 布局中的不同位置使用。父元素的宽度并不总是相同，但我希望这个元素相对于页面宽度始终具有相同的宽度。

示例： 在 12 列网格中，一篇新闻文章有时跨越 12 列，有时是 6 列。编辑者可以在新闻文章文本中添加 <blockquote>。我希望块引用始终为 3 列宽（相对于整页），无论其上下文如何（12 或 6 列）。

当然，如果这是一个具有固定列宽的网格，那会更容易，但我正在寻找一种基于百分比的流动解决方案。

PS。如果这样更容易解决问题，我愿意使用 Susy 2 alpha。

Answer 1

你会在 Susy 1 或 2 中这样做，但在 2 中总是更有趣。:)

这个问题实际上与 Susy 的任何特定内容无关，它在任何流畅的 CSS 情况下都是一个问题。如果你有一个知道你在哪个上下文中的钩子，你只能解决它。那时，你可以从任一端解决它。像这样的：

blockquote {
  @include span-columns(3);
  .narrow & { @include span-columns(3,6); }
}

没有钩子真的没有办法做到这一点。 CSS 没有element-queries（由于那篇文章中给出的原因，短期内不太可能出现）。