使用 Susy Next 在不同断点处切换装订线宽度

Question

在我的样式表中，我调用了span，使用 Susy 的 mixin 来控制站点上使用的众多模块的宽度。

我现在需要在给定断点处更改网格间距宽度。而对于像 Foundation 使用的传统网格系统，我所需要的只是这样的媒体查询（假设我在元素上使用了类）：

@include breakpoint($medium-up) {
   .column, .columns
   {
      padding: 6rem;
   }
}

我看不出如何使用 Susy 做同样的事情。我所有的网格样式现在都是通过 mixins 提供的，所以我不再有明确的钩子来定位 span。

如何在断点处切换装订线宽度，而无需为我使用过的每个位置添加单独的断点span？

从 Susy 的文档看来，答案是添加如下内容：

.example {
    @include span(6);

    @include susy-breakpoint($medium-up, $medium-up-layout) {
       @include span(6);
    }
}

但是在我的所有模块中重复这个似乎有很多重复。

当然，这个问题不仅限于 Susy。使用 Compas 的 Vertical Rhythm 也会出现同样的问题。一旦节奏需要在断点处改变，唯一的选择就是在每个点显式声明断点的改变，使用垂直节奏的功能。

在这两种情况下 - 水平布局和垂直节奏，似乎都需要一个抽象层来允许集中更改跨模块传播并避免重复媒体查询的扩散。

明确地说，我绝不是批评这两个工具包。只是在寻找使用它们的最佳方式。

Answer 1

Susy 从来没有打算规定你的工作方式，所以如果你不喜欢 Susy 处理排水沟的方法，请将 gutters 设置为 null，并像在 Foundation 中一样处理它们。 Susy 无法将其内置，因为我们严格限制您的标记 - 但您可以使用 Susy 轻松构建基础样式的网格来处理数学。如果这是你喜欢的，那就去吧！

.column, .columns {
  padding: 3rem;

  @include breakpoint($medium-up) {
    padding: 6rem;
  }
}

这只是意味着您必须在整个标记中使用column 类。这是一个权衡。

您还可以使用 Susy 简化处理方式。如果排水沟是您唯一需要更改的东西，您可以减少更多的输出：

.example {
  @include span(6);

  @include susy-breakpoint($medium-up, $medium-up-layout) {
    @include gutters();
  }
}

如果您想减少输入，可以将其包装在 mixin 中：

@mixin gutter-change() {
  @include susy-breakpoint($medium-up, $medium-up-layout) {
    @include gutters();
  }
}

.example {
  @include span(6);
  @include gutter-change;
}

根据我所看到的研究，只要您提供 gzip 压缩的资产，输出中的重复媒体查询不会为 CSS 添加相关的加载时间。