Susy: Użyj różnych układów dla różnych rozmiarów ekranu

Question

Buduję mobilną pierwszą stronę internetową za pomocą Susy i chciałbym mieć różne układy dla różnych rozmiarów ekranu. Każdy układ będzie miał własny zestaw kolumn, szerokości kolumn i szerokości rynny.

Jak to zrobić?

---

moje próby:

1. Old Susy metoda

W starym Susy, byś zrobił to tak:

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

} 

[kolorami tła jest tak Mogę powiedzieć, że działa]

W New Susy, kiedy to robię, liczba kolumn wynosi zawsze 6 niezależnie od rozmiaru ekranu. Nie są one również prawidłowym rozmiarem kolumny.

2. Breakpoint Metoda New Susy ma nową break point method który pozwala określić różne kolumny w różnych układach. W ten sposób użyłem go:

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

Kiedy używam tego kodu, kolumny są teraz zawsze tkwi w 4, niezależnie od układu. Nie można również użyć tej metody do określania różnych szerokości kolumn/wartości dopełnienia.

Susy jest tak niesamowita, że ​​wiem, że coś nie rozumiem. Ale spędziłem dużo czasu przeglądając dokumenty i próbując różnych rzeczy i nie widząc, co robię źle.

Wiem, że zadałem to pytanie before, ale to było dla starej wersji Susy.

Answer 1

Powód, dla którego widzisz 4-kolumny w tle w każdym punkcie przerwania, oznacza, że ​​zadeklarowałeś tylko @include susy-grid-background; w kontekście 4-kolumnowym. Myślę, że ktoś już zgłosił błąd, aby utworzyć punkt przerwania/skrót w tle, więc wkrótce będzie dostępny. W międzyczasie będziesz musiał ponownie wywołać ten mixin wszędzie, gdzie zadzwonisz pod numer container.

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

Ale masz rację, at-breakpoint pozwala jedynie na zmianach w kolumnie liczyć w tym momencie. Chciałbym to rozwinąć, więc jeśli zechcesz zgłosić błąd na githubie, z przyjemnością go obejrzę. W międzyczasie jest mixin with-grid-settings, który pozwala na zmianę wszystkich podstawowych ustawień (mam też nadzieję, że dostanę tam ustawienia zaawansowane, jeśli będę mógł wkrótce).

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