Question

我正在尝试为网格定义一些默认行为，然后在特定断点处覆盖它们。在下面的示例中，我希望将两个div叠加在一起，从默认设置略微修改后的gutter设置，然后在800px及以上，我希望divs彼此相邻堆叠。第二部分没有发生。似乎小于800px场景中的一些边距设置正应用于大于800px的场景。请让我知道如何对此进行编码并遵守可疑的最佳做法。

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

这看起来像是一个黑客，但希望你从中得到一些东西！我在您的codepen中添加了以下内容：

.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在断点处切换网格设置的正确方法

2 个答案: