关于断点布局更改的 Susy 2.1.3 问题

Question

帮帮我，你这个时髦的苏西，我快要崩溃了！我正在尝试为我的项目制作最有效的布局，但我遇到了一些我无法用 Susy/breakpoint 弄清楚的事情。

我希望布局列在断点处发生变化，而不必更改 div 的所有 individual 跨度（因为会有许多不同的跨度宽度）方式。而不是仅仅 1 个并更改 3 或 4 个不同的列布局）。

现在我唯一能让它工作的方法是改变 divs 的跨度并保持列不变，但我希望 divs 始终保持相同的大小，然后根据剩余的列数放置到位。

我认为这正是我编写@include 的方式。我试过在断点内做 container/layout 而不是 with-layout 但没有成功。我知道这可能是一个我没有看到的简单修复。

编辑：我还注意到，无论我如何更改，div 始终采用默认的 $susy 映射，并且不会在断点处更改它。

SCSS:

@import 'susy';
@import 'breakpoint';

$layout1: layout(12 .125 split fluid center);
$layout2: layout(16 .125 split fluid center);
$layout3: layout(24 .125 split fluid center);

.container {
  @include container;
  @include with-layout($layout1);
  background: orange;

    @include breakpoint(600px) {
      @include with-layout($layout2);
      background: red;
    }

    @include breakpoint(1000px) {
      @include with-layout($layout3);
      background: blue;
    }

}

.testbox {
  @include span(1);  
}

html:

<div class="container">

  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>

</div>

Answer 1

with-layout 仅更改用于 Susy 的设置 mixins/functions 嵌套在其中:

@include with-layout($layout2) {
  // code nested here will use the $layout2 settings
}

任何对 with-layout 的调用都没有嵌套 - 因此没有任何变化。这正是@cimmanon 试图在评论中解释的内容。同样，@media 仅更改直接嵌套在其中的内容 — 因此您的颜色可以很好地更改，但您的跨度不会。颜色实际上是嵌套的，跨度不是。

因为Sass是预处理过的，所以span(1)不能有多个输出，除非调用多次。现在你调用它一次，所以它有一个输出。如果您在不同的布局上下文中多次调用它，您可以获得不同的输出。

// This will give you different spans at different breakpoints:
@include breakpoint(600px) {
  @include with-layout($layout2) {
    @include span(1);
    background: red;
  }
}

// you can also use the susy-breakpoint shortcut:
@include susy-breakpoint(1000px, $layout3) {
  @include span(1);
  background: blue;
}

关于断点布局更改的 Susy 2.1.3 问题

Susy 2.1.3 issue regarding layout change on breakpoint

html

grid

sass

susy

breakpoint-sass