susy 在断点中切换网格设置的正确方法

Question

我正在尝试为网格定义一些默认行为，然后在特定断点处覆盖它们。在下面的示例中，我希望两个 div 相互堆叠，默认的装订线设置略有修改，然后在 800px 及以上我希望 div 彼此堆叠。第二部分不会发生。似乎小于 800px 场景中的一些边距设置正在应用于大于 800px 的场景。请让我知道如何对此进行编码并遵守 susy 最佳实践。

HTML:

<div class="container">
    <div class="primary">
        <p>I am Primary</p>
    </div>
    <div class="secondary">
        <p>I am Secondary</p>
    </div>
</div>

SCSS:

$susy:
(
  flow: ltr,
  output: float,
  math: fluid,
  column-width: false,
  container: 1200px,
  container-position: center,
  last-flow: to, columns: 12,
  gutters: 1 / 4,
  gutter-position: after,
  global-box-sizing: border-box,
  debug: (
    image: hide,
    color: rgba(#66f, 0.25),
    spot: background, toggle: bottom right)
  );

* {
    @include box-sizing(border-box);
}

.container{
    @include container;
}

.primary{
    background-color: red;
}

.secondary{
    background-color: blue;
}

// Mobile first layout with slightly different
// gutter settings from default
@include with-layout(12 0.5 split){

    .primary{
        @include span(12);
    }

    .secondary{
        @include span(12);
    }
}

// this layout should take over at 800px and above
// and share a row but instead boxes end up on different
// rows
@include susy-breakpoint(800px, $susy)
{
    .primary{
        @include span(first 6);
    }

    .secondary{
        @include span(last 6);
    }
}

我还做了一个代码笔示例，可以在这里找到：

http://codepen.io/sbonham/pen/vLKvMJ

Answer 1

这看起来像是一个 hack，但希望你能从中有所收获！我将以下内容添加到您的代码笔中：

.primary, .secondary {
  display: inline-block;
  margin: gutter(12);
  width: span(12);
  width:500px;
}

http://codepen.io/alexG53090/pen/wMWNzR

Answer 2

是的，Susy 只是在写入 CSS 值，因此您必须像处理普通 CSS 一样处理它。 Susy 不知道您的 DOM，因此它无法知道您想要覆盖之前设置的值。如果我们假设您总是想要覆盖，我们将不得不输出大量臃肿的代码。

这里有两种解决方案：

将您的小屏幕布局放在 max-width 媒体查询中，这样它就不会影响大屏幕。
或者：覆盖大屏幕媒体查询中的那些全局值。要解决的问题是您的初始 split 装订线添加的额外边距。

我更喜欢第一种解决方案，因为我认为覆盖很难看。但是，如果您要处理一些不支持媒体查询的小型浏览器（那些仍然存在吗？），那么您将需要使用第二种解决方案。尝试：

@include susy-breakpoint(max-width 800px, 12 0.5 split) {
    .primary{
        @include span(12);
    }

    .secondary{
        @include span(12);
    }
}

susy 在断点中切换网格设置的正确方法

susy proper way to switch grid settings in breakpoint

css

responsive-design

sass

susy-sass

breakpoint-sass