Bourbon Neat grid-push 没有按预期工作？

Question

我有一个非常简单的问题似乎很难解决。我想坚持使用标准的 12 列整齐网格，但我希望两个 .homeSplit div 各占 5 列。我希望第二个（.insights）在中间获得 space 的 1col，所以我给了它一个 grid-push(1)。当谈到移动尺寸时，我希望这些 div 中的每一个都占据完整的 12 列并相互堆叠。问题是，一旦我缩小到移动尺寸，我分配给 grid-push(1) 的 1col space 就会持续存在，我不知道如何摆脱它。

CSS/SASS:

.homeSplit {
    position: relative;
    @include grid-column(5);

&.news {

    .post {
        margin-bottom: 26px;
    }
}
&.insights {
    @include grid-push(1);
    padding-left: 30px;
    z-index: 999;

    .post {
        margin-bottom: 26px;
    }
}
}

    @media only screen and (max-width: 959px) {
    .homeSplit {
        @include grid-column(12);

        &.insights {
            @include grid-push(0);
        }
    }

}

我也试过 grid-push(-1) 但它太过分了。我误解了如何使用 Neat 吗？把我的头发拉过来。

Answer 1

选项一：嵌套错误

在上面的示例中，@media 声明嵌套在 .homeSplit 块中，但随后再次声明 .homeSplit w/in @media。但是，您上面的代码可能不会运行并且会出错，因此我假设在将其复制并粘贴到您的问题中时，翻译中丢失了一些内容。

选项 2：grid-push 需要 false 或者只是空的。

grid-push(0) 不是真正的东西但是在 sass 0 可能 == false 所以你可以尝试以下:

.homeSplit {
    position: relative;
    @include grid-column(5);

    &.news {

        .post {
            margin-bottom: 26px;
        }
    }
    &.insights {
        @include grid-push(1);
        padding-left: 30px;
        z-index: 999;

        .post {
            margin-bottom: 26px;
        }
    }

    @media only screen and (max-width: 959px) {
        @include grid-column(12);

        &.insights {
            @include grid-push(); // 'false' is the default here
        }
    }
}

注意：我也清理了一些底部的嵌套

我将添加第二个答案，展示如何使用 grid-media mixin 执行此操作。

Answer 2

此处最好的方法是使用 grid-media() mixin 来生成一系列网格。这是一个看起来像的例子（删除了一些无关的代码。

此外，在媒体查询中，默认情况下整洁 min-width 优于 max-width。根据您的布局，min-width 让事情变得容易得多。

$my-desktop-grid: (
  media: 959px,
);

.homeSplit {
    @include grid-column(); // default's to 12 here

    @include grid-media($my-desktop-grid) {
        @include grid-column(5);

        &.insights {
            @include grid-push(1);
        }
    }
}

我创建了一个 codepen 作为示例，因此您可以看到它的实际效果。

Bourbon Neat grid-push 没有按预期工作？

Bourbon Neat grid-push not working as expected?

sass

neat

bourbon

https://codepen.io/whmii/pen/aVvqma