0

Susy を使い始めたばかりで、達成したいことがありますが、Susy のドキュメントとオンライン チュートリアルを読んでいますが、その方法がわかりません。

私はこのhtmlを持っています:

<div class="page">
  <nav>nav</nav>
  <div class="main">
    <div class="summary">
      summary
    </div>
    <div class="content">
      content
    </div>
  </div>
  <footer>footer</footer>
</div>

およびこれらの Susy 設定:

$total-columns: 12;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;

$show-grid-backgrounds: true;

@include border-box-sizing;

// breakpoint variables
$M: 30em;
$L: 50em;

そしてこのscss：

.page {

@include container;
@include susy-grid-background;

nav {
    @include at-breakpoint($M) {
        @include span-columns(2,12);    
    }
}

.main {
    @include at-breakpoint($M) {
        @include span-columns(10 omega,12); 
    }
    .summary {
        @include at-breakpoint($L) {
            @include span-columns(2 omega,10);  
        }   
    }
    .content {
        @include at-breakpoint($L) {
            @include span-columns(8,10);    
        }   
    }

}
footer {clear: both;}

それは期待どおりに機能し、コンテンツは最大幅で完全に流動的です。ただし、同じ動作が必要ですが、4 列のレイアウトから始めて、8 列、次に 12 列に変更します。

私はこのようにします：

$total-columns: 4;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;

$show-grid-backgrounds: true;

@include border-box-sizing;

// breakpoint variables
$M: 30em;
$L: 50em;

そしてscss：

.page {

@include container;
@include susy-grid-background;

// Now create a media-query breakpoint at the min-width of 30em and use a larger grid and modify the layout
    @include at-breakpoint($M 8) {
    // This will create a new container with a total of 8 columns
      @include container;
      @include susy-grid-background;
     // Now modify the inner elements to their new home
     nav { @include span-columns(2,8); }
       .main { @include span-columns(6 omega,8); }
     }

    @include at-breakpoint($L 12) {
    // This will create a new container with a total of 12 columns
     @include container;
     @include susy-grid-background;
     // Now modify the inner elements to their new home
     nav { @include span-columns(2,12); }
    .main { 
      @include span-columns(10 omega,12); 
      .content {
        @include span-columns(8,10); 
      }
      .summary {
        @include span-columns(2 omega,10); 
      }
    }

  }

footer {clear: both;}

 }

これも問題なく動作しますが、最初の例のようにすべてのレイアウトを流動的にすることはできません。たとえば、幅が 450 ピクセルの場合、4 列のレイアウトはビューポートを埋めません。768px でも同じことが起こり、8 列ではビューポートがいっぱいになりません。最初の例のように、レイアウトが常に利用可能な幅を埋め、定義されたブレークポイントに従って列を変更したいと思います。

それは Susy の通常の動作ですか、それとも別の方法で行うことは可能ですか?

これが初心者の質問である場合は申し訳ありませんが、私はまだ始めたばかりであり、実際のプロジェクトで Susy を使用する前に明確にしたいと思います。

ありがとう。

4

1 に答える 1

1

これが私がレスポンシブ グリッドを処理する方法です。

たとえば、ブレークポイントごとに定義する変数がいくつかあります (列の数で名前を付けるのが好きです)。

// 6 Columns -------------------------------------------------------------------
$six-gut-width : .5rem;
$six-padding   : 0;
$six-width     : 6 * $column-width + 5 * $six-gut-width + $six-padding * 2;

// 8 Columns -------------------------------------------------------------------
$eight-width : 8 * $column-width + 7 * $gutter-width + $grid-padding * 2;

このようにして、at-breakpoint呼び出しで使用する実際の幅と列数の両方を取得できます。

次に、ブレークポイントは次のように分類されます。

@include at-breakpoint($six-width 6 $eight-width) {
    // Breakpoint specific scss
    .page { set-container-width(6); }
}

ブレークポイント固有のものをブレークポイント ディレクトリの独自のパーシャルに保持するのが好きです (ただし、そうする必要はありません) ie:breakpoints/_6-cols.scssなどbreakpoints/_8-cols.scss。

より大きなブレークポイントにカスケードする場合は、3 番目のパラメーターを on のat-breakpoint()ままにするか、次のレベルよりも高い値に設定します。また、ブレークポイント宣言set-container-widthの代わりに設定していることを確認してください。Susy のドキュメントで set-container-width をcontainer確認してください

これがお役に立てば幸いです。幸運を祈ります。

于 2013-07-31T04:10:25.207 に答える