0

帮帮我，你们这些时髦的苏西，我快要崩溃了！我正在尝试为我的项目制作最有效的布局，但我遇到了一些我无法用 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>
4

1 回答 1

1

with-layout仅更改用于嵌套在其中的 Susy 混合/函数的设置：

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

您没有任何嵌套在任何调用中with-layout- 因此没有更改。这正是@cimmonon 在评论中试图解释的。同样，@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;
}
于 2015-01-07T18:41:41.640 回答