Jak ustawić maksymalną szerokość kontenera w Susy, że tylko powiększenie/margines rośnie na większych rzutniach?

Question

W moim największym widoku pulpitu/punkcie przerwania próbowałem osiągnąć to samo zachowanie, jak na stronie demonstracyjnej Susy (http://susy.oddbird.net/demos/magic/) - że gdy maksymalna szerokość pojemnika zostanie osiągnięta, tylko dopełnienie lub margines z każdej strony rośnie, podczas gdy sam pojemnik pozostaje na poziomie jego maksymalna szerokość.

Ale nadal jestem trochę zdezorientowany w kilku punktach, takich jak preferowana jednostka i jaka jest najlepsza funkcja do wykonania opisanego zachowania wypełnienia/marginesu.

Moje ustawienia ogólne Susy w tej chwili są następujące:

$total-columns: 24; 
$column-width: 3%; 
$gutter-width: 1%; 
$grid-padding: 0; 

Specyficzną częścią SCSS wygląda. Podaję pojemnik i obwarowane go z marginesem poprzez squish:

.sectionwrap{ 
    @include container; 
    @include squish(3,3); 
    @include breakpoint($medium) { 
     @include squish(2,2); 
    } 
    @include breakpoint($small) { 
     @include squish(1,1); 
    } 
} 

Ale problemem jest to, że pojemnik i spłaszczony obszary zarówno rosnąć i rosnąć i rosnąć proporcjonalnie. Prawdopodobnie jedną z wad jest to, że używane jednostki są procentami? Czy byłoby rozsądniej używać em lub rem?

Oznacza, że ​​po zsumowaniu i osiągnięciu maksymalnej szerokości (liczba kolumn * (szerokość kolumny + szerokość rynny)) automatycznie tylko rosnące obszary nadal rosną w teorii? Ale próbowałem i to się nie udało.

Próbowałem również ustawić:

$container-width: 1000px; 

ale również bez powodzenia. Wszelkie wskazówki są mile widziane. Z pozdrowieniami Ralf

Aktualizacja: Mam uporządkowane mojej strony na komórkę pierwszy i myślę, że mam cały Susy koncepcji siatki, która była nieco wprowadzać w błąd przez Squish() zdarzenia w pierwszej kolejności. : s Ale jakoś myślę, że znowu coś złego zrobię.

// breakpoint variable set for Breakpoint - value is converted to em by Breakpoint 
$fivehundred: min-width 500px; 

//basic Susy settings for the initial mobile viewport 
$total-columns: 8; 
$column-width: 3em; 
$gutter-width: 1em; 
$grid-padding: 1em; 

//modified Susy setting for a larger viewport 
//intentionally chose larger numbers to see a significant change at the breakpoint 
$largerviewport: 12,5em,1em,1em; 

//the main content area wrapper class where i initially wanted to enlarge the container 
//at each breakpoint step by step 
.sectionwrap{ 
    @include container; 
    @include breakpoint($fivehundred) { 
     @include with-grid-settings($largerviewport); 
    } 
} 

jakoś pałeczki szerokość pojemnik przesz $ fivehundred przerwania i poza nadal do wartości początkowych, zamiast do $ te largerviewport. Jakimś sposobem obawiam się, że to niewłaściwy sposób modyfikacji kontenera w mojej klasie opakowania? Kolejny błąd w rozumowaniu po mojej stronie? Z poważaniem Ralf

Aktualizacja 2: Ok, które jest rzeczywiście dziwne. Próbowałem następujący kod Sass teraz:

.sectionwrap{ 
    @include container; 
    background-color: red; 
    @include breakpoint(500px) { 
     @include with-grid-settings(24,7em,4em,1em); 
     background-color: green; 
    } 
} 

I CSS, który został zwrócony wygląda następująco:

.sectionwrap { 
    max-width: 31em; 
    padding-left: 1em; 
    padding-right: 1em; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: red; } 
     .sectionwrap:after { 
     content: ""; 
     display: table; 
     clear: both; } 
    @media (min-width: 31.25em) { 
    .sectionwrap { 
     background-color: green; 
    } 
} 

Jakoś cały z siatki-ustalanie został pominięty?

Aktualizacja 3: Ok wymyśliłem rzeczy. Nie zdawałem sobie sprawy, że konieczne jest ustawienie szerokości kontenera po włączeniu funkcji z ustawieniami grid. W innym przykładzie, kiedy właśnie zmieniłem rynnę, nie było to konieczne. Ale wygląda na to, że tak.

.sectionwrap{ 
    @include container; 
    @include breakpoint($fivehundred) { 
     @include with-grid-settings($columns: 12, $width: 3em, $gutter: 1em, $padding: 1em){ 
       @include set-container-width; 
     } 
    } 
} 

Update 4 Ok dla innych, którzy mogą napotkasz podobny problem, który może być pomocny. Zastanawiałem się tylko, dlaczego moje wartości ustawione w funkcji z ustawieniem siatki nie są przestrzegane - w szczególności wartość dopełnienia. Wtedy zrozumiałem, że ustawiona szerokość kontenera ustawia tylko wartość maksymalnej szerokości. Ale aby zastosować wszystkie wprowadzone wartości do siatki, musisz ponownie dodać mixin kontenera, aby wykorzystać szerokość i szerokość klocków. Ale teraz wszystko wydaje się w porządku i działa. ;) Zajęło chwilę. Pozdrawiam r.

Answer 1

Obie jednostki % i mieszanka squish działają przeciwko tobie. Susy ustawia domyślnie maksymalną szerokość kontenerów w tych samych jednostkach, które zostały użyte do zdefiniowania siatki. W rzeczywistości to wszystkie te jednostki są używane. Jeśli chcesz, aby twoja maksymalna szerokość wynosiła px, zdefiniuj swoją siatkę w px. Jeśli chcesz em użyj em. $container-width jest przesłonięciem domyślnym, więc powinno zadziałać. Musiałbym zobaczyć twój aktualny kod, kiedy próbowałeś, żeby wiedzieć, co poszło nie tak.

polecam właśnie ten:

$total-columns: 24; 
$column-width: 30px; // adjust as needed 
$gutter-width: 10px; // adjust as needed 
$grid-padding: 0; 

.sectionwrap{ 
    @include container; 
} 

Wszystko inne jest tak naprawdę overcomplicating rzeczy.