1

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

我现在需要在给定断点处更改网格间距宽度。而对于像 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 的 Vertical Rhythm 也会出现同样的问题。一旦节奏需要在断点处更改，唯一的选择是在使用垂直节奏功能的每个点显式声明断点的更改。

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

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

4

1 回答 1

2

Susy was never intended to dictate how you work, so if you don't like Susy's approach to gutters, set the gutters setting to null, and handle them exactly like you would in Foundation. Susy can't build that in, because we are strict about staying out of your markup — but you could easily build foundation-style grids using Susy to handle the math. If that's what you like, go for it! 

.column, .columns {
  padding: 3rem;

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

That just means you'll have to use the column class all over your markup. It's a trade-off.

You can also simplify the way you are handling it with Susy. If gutters are the only thing you need to change, you can cut down more on your output:

.example {
  @include span(6);

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

And if you want to cut down on your input, you can wrap it in a mixin:

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

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

From the research I've seen, repeated media-queries in the output don't add relevant load-time to CSS, as long as you are delivering gzipped assets.

于 2014-07-25T23:37:15.557 回答