Susy：異なる画面サイズに異なるレイアウトを使用する

Question

私はSusyを使用してモバイルの最初のウェブサイトを構築しており、異なる画面サイズに対して異なるレイアウトをしたいと考えています。各レイアウトには、独自の列、列幅、溝幅があります。

どうすればよいですか？

---

私の試み：古いスージーで

1.旧スージー方法

、あなたはこのようにそれを行うだろう：

$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.ブレークポイントの方法 新スージーは、さまざまなレイアウトのために別の列を指定できます新しいbreak point methodを持っています。これは私がそれを使用している方法です。私はこのコードを使用すると

$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で立ち往生しています。このメソッドを使用して、異なる列幅/パディング値を指定することもできません。

スージーはとても素晴らしいので、私は何か誤解していることを知っています。しかし、私は長い時間をかけてドキュメントを読んで、さまざまなことを試してきました。私が間違っていることを見ることはできません。

私はこの質問をbeforeと尋ねましたが、これは古いSusyバージョンのものでした。

Answer 1

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

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

でも、正しくは、at-breakpointはこの時点での列カウントの変更のみを許可しています。私はそれを拡張したいので、githubにバグを報告すれば、それを喜んで見ていきます。その間にwith-grid-settingsミックスインがあり、基本設定をすべて変更することができます（私がすぐに使えれば、そこに高度な設定ができるようにしたいと思っています）。

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