Susy: Verwenden Sie verschiedene Layouts für verschiedene Bildschirmgrößen

Question

Ich baue eine mobile erste Website mit Susy und möchte verschiedene Layouts für verschiedene Bildschirmgrößen haben. Jedes Layout hat seine eigenen Spalten, Spaltenbreiten und Rinnenbreiten.

Wie mache ich das?

---

Meine Versuche:

1. Alt Susy Methode

In alter Susy, würden Sie es wie folgt tun:

$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; 
} 

} 

[Die Hintergrundfarben sind so Ich kann sagen, dass es funktioniert]

In New Susy, wenn ich dies tue, ist die Anzahl der Spalten immer 6 unabhängig von der Bildschirmgröße. Sie haben auch nicht die richtige Spaltengröße.

2. Breakpoint- Methode New Susy hat einen neuen break point method, die Sie verschiedene Spalten für verschiedene Layouts angeben können. Dies ist, wie ich es benutzt haben:

$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; 
} 
} 

Wenn ich diesen Code verwenden, werden die Spalten jetzt immer bei 4 stecken, und zwar unabhängig von Layout. Sie können diese Methode auch nicht verwenden, um unterschiedliche Spaltenbreiten/Füllwerte anzugeben.

Susy ist so fantastisch, dass ich weiß, dass ich etwas falsch verstehe. Aber ich habe viel Zeit damit verbracht, über die Dokumente zu gehen und verschiedene Dinge auszuprobieren, und ich kann nicht sehen, was ich falsch mache.

Ich weiß, ich habe diese Frage gestellt, aber das war für die alte Susy-Version.

Answer 1

Der Grund, warum Sie an jedem Haltepunkt 4 Spalten im Hintergrund sehen, ist, dass Sie nur @include susy-grid-background; im 4-Spalten-Kontext deklariert haben. Ich denke, jemand hat bereits einen Fehler gemacht, um einen Breakpoint/Hintergrund-Shortcut zu erstellen, also wird das bald kommen. In der Zwischenzeit müssen Sie das Mixin überall anrufen, wo Sie anrufen container.

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

Aber du hast Recht, at-breakpoint erlaubt nur bei Änderungen an Spaltenanzahl an dieser Stelle. Ich möchte das erweitern, also wenn Sie einen Fehler auf GitHub ablegen, werde ich es mir gerne anschauen. In der Zwischenzeit gibt es ein with-grid-settings Mixin, mit dem Sie alle grundlegenden Einstellungen ändern können (ich hoffe auch, die erweiterten Einstellungen dort zu bekommen, wenn ich bald kann).

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