Sass 使用Susy Next在不同断点处切换边沟宽度

在我的样式表中，我调用了

span

，使用Susy的mixin来控制一个站点中使用的众多模块的宽度

我现在需要更改给定断点处的栅格边沟宽度。而对于传统的网格系统（如基金会使用的11），我只需要一个像这样的媒体查询（假设我已经在元素上使用了类）：

我不知道如何使用Susy做同样的事情。我所有的网格样式现在都是通过mixin提供的，所以我不再有明确的挂钩来瞄准跨度

如何在断点处切换边沟宽度，而不必为我使用的每个位置添加单独的断点

span

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

.example {
    @include span(6);

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

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

当然，这个问题不仅限于苏西。使用康帕斯的垂直节奏也会出现同样的问题。一旦节奏需要在断点处更改，唯一的选择就是在每个断点处显式声明更改，并使用垂直节奏的功能

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

---

明确地说，我决不会批评这两个工具包。只是寻找最佳的使用方法。

< P> Susy从来没有打算支配你的工作方式，所以如果你不喜欢Susy的方法，那么把<代码> Gutter 设置为<代码> null ，并像你所说的那样处理它们。Susy无法将其内置，因为我们严格要求不使用标记，但您可以使用Susy轻松构建基础样式的网格来处理数学问题。如果那是你喜欢的，那就去吧

.column, .columns {
  padding: 3rem;

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

这只意味着您必须在标记中使用

列

类。这是一种权衡

您还可以简化处理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;
}

---

从我所看到的研究来看，输出中重复的媒体查询不会给CSS增加相关的加载时间，只要您交付的是gzip资产。

请不要误解我的意思。我喜欢苏西的方法。只是觉得很难找到正确的使用方法。我认为问题的很大一部分（就我的理解和我所看到的其他人的理解而言）是试图将Susy（和SAS）是动态的这一想法解耦，因为它们能够将反应传播到先前声明的选择器中的断点。在OO语言中，触发器可以改变整个程序的状态是有意义的，而在Sass中，情况并非如此。谢谢你的回复。很晚了&我明天早上再处理。谢谢。这是有道理的。我不想复制基础，只是为了理解如何使用Susy做同样的事情。我认为所有这些的模式都是将跨断点功能打包到mixin中，并对重复的媒体查询输出产生影响。因此，有效地向断点询问水槽，并让它返回一组跨断点操纵水槽的查询。好吧，用Susy复制Foundantion是Susy工作的一部分。Susy的整个目标（与基金会和其他基金不同）是你可以把它拆开，以自己的方式做事，而不是试图适应我的工作方式。关于Sass，您注意到的是它是CSS的预处理器，因此无法访问DOM。由于CSS与DOM的级联方式，Sass不可能可靠地实现OO编程语言所期望的那种魔力。我想我的问题是我太习惯函数式语言和OO语言了，我发现很难改变这种心态，即使是以琐碎的假设的形式出现在背景中，我也在思考如何处理事情！我不想重复这么多事情

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

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