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

【问题标题】：How to stretch nested div full width outside of container div with susy?如何使用susy在容器div之外拉伸嵌套的div全宽？
【发布时间】：2017-04-25 11:14:28
【问题描述】：

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

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

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

这是我的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>

这是我的 susy 代码：

//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;
}

【问题讨论】：

标签： html css sass grid susy

【解决方案1】：

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

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

要使其成为移动优先和响应式，您需要构建移动设计，然后在最小宽度媒体查询中添加任何其他（平板电脑/台式机/等）样式。细节很大程度上取决于您要完成的工作。

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

【讨论】：