使用Susy Next在不同断点切换Gutter宽度

Question

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

现在我需要更改给定断点上的网格槽宽度。对于传统的网格系统(如Foundation使用的网格系统)，我所需要的只是这样的媒体查询(假设我在元素上使用了类)：

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

我不知道怎么用苏西做同样的事。我所有的网格样式现在都是通过混合器提供的，所以我不再有明确的挂钩来瞄准范围。

如何在断点切换沟槽宽度而不需要为我使用span的每个地方添加单独的断点

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

.example {
    @include span(6);

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

但是，在我的所有模块中重复这一点似乎是一种重复。

当然，这个问题并不局限于苏西。使用Compas的垂直节奏也会出现同样的问题。一旦节奏需要在断点改变，唯一的选择就是在每个断点上显式地声明变化，使用垂直节奏的功能。

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

明确一点，我绝不批评任何一个工具箱。只是在寻找使用它们的最佳方法。

Answer 1

Susy从来不打算规定您的工作方式，所以如果您不喜欢Susy的排水沟方法，请将gutters设置设置为null，并完全像在基金会中那样处理它们。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 gutter-change() {
  @include susy-breakpoint($medium-up, $medium-up-layout) {
    @include gutters();
  }
}

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

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