susy-compass - 有没有办法使用 susy 为元素设置最小宽度？

Question

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

这是我的场景：

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

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

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

有没有办法可以用 Susy 做到这一点？

score 1 · Accepted Answer

当然。最简单的方法是确保在有足够的空间容纳 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 不是问题——有办法做到这一点，但无论你使用什么系统，这都需要一些工作。我仍然建议使用更高的断点（或中间断点）。

1 回答 1