5

Susy を使用してモバイル ファーストの Web サイトを構築しており、画面サイズごとに異なるレイアウトを使用したいと考えています。各レイアウトには、列、列幅、ガター幅の独自のセットがあります。

どうすればいいですか？

私の試み:

1. 古いスージー法

古い Susy では、次のようにします。

$base-font-size: 10px;
$show-grid-backgrounds  : true;


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

body {
background:pink;    
}


@media only screen and (min-width: 480px) {
$total-columns       : 3;
/*$column-width        : 12.567em;
$gutter-width        : 3em;
$gutter-padding      : $gutter-width;*/

body {
background:yellow;  
}


}

@media only screen and (min-width: 600px) {
$total-columns       : 6;
/*$column-width        : 7.500em;
$gutter-width        : 2em;
$gutter-padding      : $gutter-width;*/

body {
background:blue;    
}

}

@media only screen and (min-width: 768px) {
$total-columns       : 6;
/*$column-width        : 7.500em;
$gutter-width        : 2em;
$gutter-padding      : $gutter-width;*/

body {
background:green;   
}

}

@media only screen and (min-width: 960px) {
$total-columns       : 6;
/*$column-width        : 8.833em;
$gutter-width        : 3em;
$gutter-padding      : $gutter-width;*/

body {
background:red; 
}

}

[背景色は機能していることがわかります]

New Susy では、これを行うと、画面サイズに関係なく常に列数が 6 になります。それらは正しい列サイズでもありません。

2. ブレークポイント メソッド 新しい Susy には、レイアウトごとに異なる列を指定できる新しいブレーク ポイント メソッドがあります。これは私がそれを使用した方法です：

$base-font-size: 10px;
$show-grid-backgrounds  : true;


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

body {
background:pink;    
}

.layout-primary {
  @include container;
  @include susy-grid-background;
}


@include at-breakpoint(480px 3) {
  .layout-primary {
  @include container;
 }

}

@include at-breakpoint(600px 6) {
  .layout-primary {
  @include container;
 }
}

@include at-breakpoint(768px 6) {
  .layout-primary {
  @include container;
 }
}

このコードを使用すると、レイアウトに関係なく、列が常に 4 のままになります。また、このメソッドを使用して、異なる列幅/パディング値を指定することもできません。

Susy はとても素晴らしいので、私が何かを誤解していることがわかります。しかし、ドキュメントを調べてさまざまなことを試すのに長い時間を費やしましたが、何が間違っているのかわかりません。

以前にこの質問をしたことは知っていますが、それは古い Susy バージョンに関するものでした。

4

1 に答える 1

6

各ブレークポイントでバックグラウンドに 4 列が表示される理由は@include susy-grid-background;、4 列のコンテキストでのみ宣言したためです。誰かがブレークポイント/バックグラウンド ショートカットを作成するバグを既に報告していると思います。それまでの間、 を呼び出すすべての場所でその mixin を再度呼び出す必要がありますcontainer。

@include at-breakpoint(600px 6) {
  .layout-primary {
    @include container;
    @include susy-grid-background;
  }
}

しかし、その通りですat-breakpoint。現時点では、列数の変更のみが許可されています。それを拡張したいので、github にバグを報告していただければ、喜んで検討します。それまでの間、with-grid-settingsすべての基本設定を変更できる mixin があります (できれば、すぐに高度な設定を取得したいと考えています)。

@include at-breakpoint(600px 6) {
  @include with-grid-settings(6,6em,1em,1em) {
    .layout-primary {
      @include container;
      @include susy-grid-background;
    }
  }
}
于 2012-11-23T22:44:53.303 に答える