Question

我知道这可能是不可能的，我查看了文档，我找不到它。

这是我的情景：

假设我有一个12列网格，主要内容在左侧，次要在右侧。

我正在遵循移动优先方法，因此默认样式（移动）使左右列均为100％。主要内容是第一个和次要的底部。

然后，对于平板电脑/桌面，我将主要内容设为8列（对齐左侧）和次要4列（右侧对齐）。但是，我需要辅助内容列始终至少为300像素（因为广告）。

我可以用Susy做到这一点吗？

Answer 1

不确定。最简单的方法是确保断点不会发生，直到4/12列的空间足够大于300px。如果做不到这一点，你就必须发挥创意。

在CSS中唯一可行的方法是让受控元素（辅助）在标记中排在第一位。由于处理文档流的方式，后面的元素不可能影响前一个 - 并且您需要secondary上的样式来控制main移动的方式。

首先要让secondary以你想要的方式移动。您还需要在此处手动设置装订线：

.secondary {
  @include span-columns(4 omega);
  min-width: 300px;
  margin-left: gutter();
}

然后你需要给main一个布局上下文，这样它就不会包围浮动的secondary。最简单的方法（使用一些副作用）是使用overflow: hidden。

.main {
  overflow: hidden;
}

就是这样。如果您无法使用overflow: hidden，则还有其他方法可能对您有用。 OOCSS lastUnit用于此目的，但使用了更多代码。

或者您可以使用flexbox，但支持不是很好。

基本上：Susy不是问题 - 有办法做到这一点，但无论你使用什么系统，都需要做一些工作。我仍然建议使用更高的断点（或中间断点）。