如何使用 susy 在容器 div 外拉伸嵌套 div 全宽？

Question

使用 susy 将嵌套的 div 拉伸到整个宽度的推荐方法是什么？

我目前正在使用出血，想知道这是否是正确的方法。

以及如何让设计响应移动优先？

这是我的 html:

<div class="container">
    <div class="child1">
        <h4>Child1</h4>
        <div class="grandchild1">
            <p>Grandchild1</p>
        </div>
        <div class="grandchild2">
            <p>Grandchild2</p>
        </div>
        <div class="grandchild3">
            <p>Grandchild3</p>
        </div>
        <div class="grandchild4">
            <p>Grandchild4</p>
        </div>
    </div>
    <div class="child2">
        <h4>Child2</h4>
    </div>
    <div class="child3">
        <h4>Child3</h4>
    </div>
</div>

这是我的代码：

//Library imports
@import "compass/reset";
@import "compass/css3";

@import "susy";
@import "breakpoint";
$susy:( columns: 12, container: 100%, output: float, gutters: 1/3, global-box-sizing: border-box, debug: ( image: show, output: overlay, color: rgba(77, 171, 252, .5), toggle: top right, ), );
.container {
    @include container();
    width: 75%;
    margin-top: 20px;
    .grandchild1 {
        display: block;
        margin-bottom: 14px;
        background-color: green;
        padding: 10px;
    }
    .grandchild2 {
        display: block;
        @include container();
        margin-top: 4px;
        @include bleed(1em 2 10px 20% of 12 .25);
        width: 100%;
        background-color: dodgerblue;
    }
    .grandchild3 {
        margin-top: 10px;
        @include full;
        @include span(8 of 12);
        background-color: red;
    }
    .grandchild4 {
        margin-top: 10px;
        //  @include full;
        @include span(3.4 of 12);
        background-color: greenyellow;
    }
}
.child1 {
    margin-bottom: 10px;
}

Answer 1

您的问题和代码并不完全清楚，但我认为您正在尝试使嵌套元素跨越整个 viewport 宽度？在 CSS 中没有正确的方法来做到这一点，所以你所做的任何事情（有或没有 Susy）都将是一个粗略的近似值。

Susy 的 bleed 是一种伪造它的方法，如果您希望内容保留在原处，并且只有 padding/borders/backgrounds 跨过整个宽度。 bleed mixin 正在应用负边距来打破容器，并匹配正填充以保持内容到位。如果您希望内容也跨越整个视口，您应该自己应用负边距。如果您需要它与视口宽度完全匹配，它会进行一些 Susy 不知道如何处理的计算。

要使其成为移动优先和响应式的，您需要构建一个移动设计，然后在最小宽度媒体查询中添加任何其他 (tablet/desktop/etc) 样式。细节在很大程度上取决于您要完成的任务。

作为旁注，您正在以非预期的方式使用 container()。如果它对你有用，那很好——但看起来你经常覆盖输出。 container() mixin 旨在根据 container 设置或列宽之和为您提供设置宽度。它还有助于 clearfix 和水平居中。看起来您只是将它用于 clearfix，并覆盖了其他所有内容。我建议为此使用更简单的 clearfix mixin。

如何使用 susy 在容器 div 外拉伸嵌套 div 全宽？

How to stretch nested div full width outside of container div with susy?

html

css

grid

sass

susy