Susy: utilizzare layout diversi per dimensioni dello schermo diverse

Question

Sto costruendo un primo sito Web mobile utilizzando Susy e vorrei avere layout diversi per schermi di dimensioni diverse. Ogni layout avrà il proprio set di colonne, larghezze di colonne e larghezze di gronda.

Come posso fare?

---

miei tentativi: metodo

1. Vecchio Susy

Nella vecchia Susy, si dovrebbe fare in questo modo:

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

} 

[I colori dello sfondo è così Posso dire che funziona]

In New Susy, quando eseguo questa operazione, il numero di colonne è sempre 6 indipendentemente dalle dimensioni dello schermo. Inoltre, non sono le dimensioni corrette della colonna.

2. Metodo punto di interruzione Nuova Susy ha una nuova break point method che consente di specificare colonne diverse per diversi layout. Questo è il modo che ho usato:

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

Quando uso di questo codice, le colonne sono ora sempre bloccato a 4, indipendentemente dal layout. Non è inoltre possibile utilizzare questo metodo per specificare valori di larghezza/riempimento delle colonne differenti.

Susy è così fantastica che so che sto fraintendendo qualcosa. Ma ho passato molto tempo a esaminare i documenti ea provare cose diverse, e non riesco a vedere cosa sto facendo male.

So che ho fatto questa domanda before, ma quello era per la vecchia versione di Susy.

Answer 1

La ragione per cui in ogni punto di interruzione sono visualizzate 4 colonne in background, è che beacuase hai solo dichiarato @include susy-grid-background; nel contesto a 4 colonne. Penso che qualcuno abbia già segnalato un bug per creare una scorciatoia di breakpoint/background, quindi arriverà presto. Nel frattempo, dovrai chiamare di nuovo quel mixin ovunque chiami container.

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

Ma hai ragione, at-breakpoint permette solo per modifiche column-count a questo punto. Vorrei ampliarlo, quindi se presenti un bug su github, darò un'occhiata volentieri. Nel frattempo c'è un mix with-grid-settings che ti permette di cambiare tutte le impostazioni di base (spero anche di ottenere le impostazioni avanzate lì se posso presto).

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