Question

我没有使用Compass
我更喜欢使用Breakpoint.scss
我在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或者可以实现这样的目标？我希望在800px /低于800px和/或高于800px的任何地方使用6列

我正在努力保持DRY，所以在我的风格中添加一个susy-breakpoint无济于事。

我也试过下面的代码，但我想我只是在某个地方出错，因为它无效。

$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);
  }
}

这与上面的缩写相同。

susy 2.0在断点处更改列

1 个答案: