Question

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

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

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

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

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

从Susy的文档中，似乎答案是添加类似的内容：

.example {
    @include span(6);

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

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

当然，这个问题并不局限于Susy。使用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中：

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

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

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

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

1 个答案: