Question

帮助我狡猾的苏西，我正处于突破点！我正在努力为我的项目制作最有效的布局，并且我遇到了一些我能够用Susy /断点找到的东西。

我希望布局列在断点处更改，而不必更改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 / 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问题

1 个答案: