コンテナdivの外側の入れ子divの全幅をsusyで伸ばす方法は？

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> 

そして、ここで私の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; 
} 

Answer 1

ご質問やコードが完全には明らかではありませんが、私はあなたが入れ子になったをしようとしていると思います要素は全部に広がりますビューポート幅？ CSSでそれを行うための適切な方法はありませんので、あなたが何をしても（Susyの有無にかかわらず）大まかな近似になります。

Susyのbleedは、コンテンツをそのままにし、パディング/ボーダー/背景のみが全幅になるようにするために、偽装する1つの方法です。 bleed mixinは、コンテナを破るために、そして正のパディングをマッチングさせて内容を正しい位置に保つために、負のマージンを適用しています。コンテンツを完全なビューポートにまたがるようにするには、負のマージンを自分で適用する必要があります。ビューポートの幅に正確に一致する必要がある場合は、Susyが処理方法を知らないという計算が必要になります。

モバイル対応のためには、モバイルデザインを作成してから、幅の狭いメディアクエリに追加のタブレット/デスクトップ/その他のスタイルを追加することをおすすめします。詳細は、達成しようとしていることに大きく依存します。

補足として、意図しない方法でcontainer()を使用しています。それがうまくいくなら、それは問題ありませんが、出力を定期的に上書きしているようです。 container() mixinは、containerの設定、または列幅の合計に基づいて、設定された幅を与えるように設計されています。また、クリアフィックスと水平センタリングに役立ちます。あなただけのためにそれを使用しているように見え、他のすべてを上書きします。私は、より単純なclearfix mixinを使うことをお勧めします。