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

时间:2017-11-01 19:51:57

标签: sass bourbon neat

我有一个非常简单的问题,似乎很难解决。我想坚持使用普通的标准12列整齐网格,但我希望两个.homeSplit div每个占用5列。我想第二个(.insights)在中间获得1col的空间,所以我给了它一个网格推(1)。当它达到移动尺寸时,我希望这些div中的每一个占据整个12列并相互叠加。问题是,一旦我进入移动尺寸,我分配了grid-push(1)的1col空间就会持续存在,我无法弄清楚如何摆脱它。

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?把头发拉到这里。

2 个答案:

答案 0 :(得分:0)

选项1:嵌套错误。

在查看上面的示例时,@media声明嵌套在.homeSplit块中,但在.homeSplit中再次声明@media。但是,您上面的代码可能无法运行并且会出错,所以我会假设在翻译并粘贴到您的问题时,翻译中会丢失一些内容。

选项2:grid-push想要false或只是为空。

grid-push(0)不是真的,但是在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执行此操作。

答案 1 :(得分:0)

这里最好的路径是使用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作为示例,因此您可以看到它在行动中的样子。

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