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

Question

帮帮我，你们这些时髦的苏西，我快要崩溃了！我正在尝试为我的项目制作最有效的布局，但我遇到了一些我无法用 Susy/breakpoint 解决的问题。

我希望布局列在断点处更改，而不必更改 div 的所有单个跨度（因为这样会有许多不同的跨度宽度。而不是只有 1 个和更改 3 或 4 个不同的列布局)。

目前，我能够使其工作的唯一方法是更改​​ div 的跨度并保持列不变，但我希望 div 始终保持相同的大小，然后根据具体情况放置到位还有多少列要填充。

我认为这正是我编写@include 的方式。我尝试在断点内进行容器/布局，而不是使用布局，但没有成功。 我知道这可能是一个我没有看到的简单修复。

编辑：我还注意到，无论我如何更改，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/函数的设置：

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

在对with-layout 的任何调用中都没有嵌套任何内容 - 因此没有任何更改。这正是@cimmonon 试图在 cmets 中解释的内容。同样，@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;
}