susy 2.0 在断点处更改列

Question

1. 我没有使用指南针
2. 我更喜欢使用 Breakpoint.scss
3. 我正在使用 susy 2.0

我知道有很多关于这个问题的帖子，但我没有找到任何关于这个主题的 Breakpoint.scss 和 Susy 2.0。

@import "susy";
@import "breakpoint";

$medium: 800px;

$susy: (
  columns: 6,
  gutters: 3/4,
  gutter-position: split
);

@include breakpoint($medium) {
  $susy: layout(12 1/4 split);
}

body {
  @include container(show);

  @include breakpoint($medium) {
    @include container(show);
  }
}

我必须使用susy-breakpoint 还是可以实现这样的目标？ 我想要 6 列在 800 像素/以下，12 列在/800 像素以上

我试图保持 DRY，所以在我的样式中添加一个 susy 断点并没有帮助。

我也尝试过下面的代码，但我认为我只是在某处出现错误，因为它无法正常工作。

$susy: layout(6 1/4 split);

$small: 400px, 6 1/4 split;
$medium: 800px, 8 1/4 split;
$large: 1000px, 12 1/4 split;

@mixin media($size) {
  @include susy-breakpoint($size...) {
    @content;
  }
}

body {
  @include container(show);

  @include media($small) {
    @include container(show);
  }

  // debugging. didnt work either
  @include susy-breakpoint($small...) {
    @include container(show);
  }
}

Answer 1

我不知道你的 media mixin 是做什么的，所以我无法评论与此相关的任何事情。您的初始示例不起作用，因为 Sass、CSS 以及因此的 Susy 不知道 DOM - 或媒体查询之间的关系。当您在一个媒体查询中更改$susy 的值时，不会传播到所有类似的媒体查询上下文。因此，每次您需要断点来更改布局上下文时，都必须同时设置媒体查询和所需的布局。

susy-breakpoint 不是唯一的方法，但它是最短的。这是速记：

body {
  @include container(show);

  @include breakpoint(800px) {
    @include with-layout(8) { // default is set to 8-columns
      @include container(show);
    } // default is returned to global setting
  }
}

您的$small 断点当前不会更改任何内容，因为它与您的默认布局相同。较大的将改变嵌套代码的布局上下文——尽管您可以简化：因为 `1/4 split' 排水沟根本没有改变，它们不需要在每个断点处重新声明。

$susy: layout(6 1/4 split);
$medium: 800px, 8;

body {
  @include container(show);

  @include susy-breakpoint($medium...) {
    @include container(show);
  }
}

这将与上面的速记相同。