html - 如何使用 susy 在容器 div 之外拉伸(stretch)嵌套的 div 全宽？

Question

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

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

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

这是我的 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 是一种伪造它的方法，如果您希望内容保留在原处，并且只让填充/边框/背景跨越整个宽度。 bleed mixin 应用负边距来打破容器，并匹配正填充以保持内容到位。如果您希望内容也跨越整个视口(viewport)，您应该自己应用负边距。如果您需要它与视口(viewport)宽度完全匹配，它会进行一些 Susy 不知道如何处理的计算。

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

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