1 
<section class="container">
  <div class="content>
    <article>MainContent</article>
    <aside>SideBar</aside>
  </div>
</section>


.content {
  @include container;
  @include at-breakpoint(0 768px 10) {
    @include container(10, 10);
}
article {
  @include span-columns(9, $total-columns);
}
aside.sidebar {
  @include span-columns(3 omega, $total-columns);
}

これは私のhtml構造とsusy-compassです。Susy グリッドを使用してレスポンシブ Web テンプレートを構築しようとしています。デスクトップ用に 960px の 12 列、タブレット用に 768px の 10 列、モバイル用に 320px の 4 列が必要ですが、わかりません。@include at-breakpoint を 10 列で 768px にしようとしましたが、デフォルトの 12 列はまだ 10 列に変更されていません。

何か案は？このようなテンプレートを作成するための良い提案はありますか?

4

1 に答える 1

3

ブレークポイントで変更したいものはすべて、内部に移動する必要がありat-breakpointます。に渡される引数は、container実際には のショートカットでat-breakpointあるため、内部では使用しないでください。次のようなものが必要です。

$total-columns: 4;
$container-width: 320px;

$tablet-width: 768px;
$tablet-columns: 10;
$desktop-width: 960px;
$desktop-columns: 12;

.content {
  @include container;
  @include at-breakpoint($tablet-width $tablet-columns) {
    width: $tablet-width;
  }
  @include at-breakpoint($desktop-width $desktop-columns) {
    width: $desktop-width;
  }
}

article {
  // mobile styles & tablet breakpoint could go here...
  @include at-breakpoint($desktop-width $desktop-columns) {
    @include span-columns(9); // $total-columns is assumed...
  }
}

aside.sidebar {
  // mobile styles & tablet breakpoint could go here...
  @include at-breakpoint($desktop-width $desktop-columns) {
    @include span-columns(3 omega);
  }
}

ここで、さまざまなグリッドを表示したい場合はsusy-grid-background、各ブレークポイントにも含める必要があります (コンテナーの幅に沿って)。グリッドの背景は、他の Susy mixin と同じです。ユーザーが指示しない限り、異なるブレークポイントで変更されることを認識しません。

于 2013-10-10T00:15:18.577 に答える