1

我正在尝试为网格定义一些默认行为，然后在特定断点处覆盖它们。在下面的示例中，我希望两个 div 堆叠在一起，稍微修改默认的装订线设置，然后在 800px 及以上我希望 div 彼此相邻堆叠。第二部分不会发生。似乎将小于 800 像素场景的一些边距设置应用于大于 800 像素的场景。请让我知道如何编写代码并遵守 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);
    }
}

我还制作了一个 codepen 示例，可以在这里找到：

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

4

2 回答 2

0

是的，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);
    }
}
于 2015-12-23T17:29:07.423 回答
0

这似乎是一个 hack，但希望你能从中得到一些东西！我在您的代码笔中添加了以下内容：

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

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

于 2015-12-23T00:33:09.987 回答