Wie kann man in Susy eine maximale Containerbreite einstellen, dass nur der Padding/Rand auf größeren Viewports wächst?

Question

In meiner größten Desktop-Ansicht/Haltepunkt habe ich versucht, das gleiche Verhalten wie auf der Susy-Demo-Seite (http://susy.oddbird.net/demos/magic/) zu erreichen - dass, wenn die maximale Breite des Containers erreicht wird, nur die Polsterung oder Rand auf jeder Seite wächst, während der Container selbst bleibt seine maximale Breite.

Aber ich bin immer noch ein wenig verwirrt über ein paar Punkte wie die bevorzugte Einheit und was ist die beste Funktion, um das beschriebene Padding/Margin-Verhalten zu erreichen.

Meine allgemeine Susy Einstellungen im Moment sind die folgenden:

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

Die spezifische SCSS Teil wie das aussieht. Ich habe einen Behälter und flankiert mit einer Marge über squish enthalten:

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

Aber das Problem ist, dass der Behälter und die squished Bereiche sowohl wachsen und wachsen und wachsen proportional. Wahrscheinlich ein Fehler ist, dass die verwendeten Einheiten Prozentsätze sind? Wäre es vernünftiger, stattdessen em oder rem zu verwenden?

Bedeutet, wenn summiert und die maximale Breite erreicht wird (Anzahl der Spalten * (Spaltenbreite + Rinnenbreite)) automatisch automatisch nur die gequetschten Bereiche in der Theorie wachsen? Aber ich habe es versucht und es ist fehlgeschlagen.

Ich habe auch versucht zu setzen:

$container-width: 1000px; 

aber auch kein Glück. Irgendwelche Hinweise werden geschätzt. Mit freundlichen Grüßen Ralf

Update: Ich habe meine Seite zu mobilen zuerst neu geordnet und dachte, dass ich das ganze Susy Gitter Konzept bekam, die von der Quetschfläche() Vorfall zunächst ein wenig täuschen war. : s Aber irgendwie denke ich, dass ich wieder etwas falsch mache.

// 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); 
    } 
} 

Irgendwie sind die Containerbreite sticks hinter dem Haltepunkt fünfhundert $ und stattdessen auf die $ largerviewport diejenigen, auf die Ausgangswerte über noch. Irgendwie befürchte ich, dass dies der falsche Weg ist, den Container in meiner Wrapper-Klasse zu modifizieren? Ein weiterer Denkfehler auf meiner Seite? Mit freundlichen Grüßen Ralf

Update 2: Ok, das ist eigentlich seltsam. Ich habe den folgenden Code Sass jetzt versucht:

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

Und die CSS, die das sieht aus wie folgt zurückgegeben wurde:

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

Irgendwie hat das ganze mit gitter Einstellung ausgelassen wurde?

Update 3: Ok Dinge herausgefunden. Es ist Ihnen nicht bewusst, dass Sie die Containerbreite festlegen müssen, nachdem Sie die Funktion "Mit Gittereinstellungen" hinzugefügt haben. In einem anderen Beispiel, wo ich gerade die Gosse geändert habe, war es nicht notwendig. Aber hier scheint es so zu sein.

.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 für andere, die in einem ähnlichen Problem führen könnte, die vielleicht hilfreich sein. Ich habe mich nur gefragt, warum meine in der Funktion "Mit Gittereinstellungen" eingestellten Werte nicht berücksichtigt wurden - insbesondere der Füllwert. Dann erkannte ich, dass die eingestellte Containerbreite nur den Wert für die maximale Breite festlegt. Um alle eingegebenen Werte in das Grid zu übernehmen, müssen Sie den Container-Mix erneut hinzufügen, so dass maxwidth und die Paddings verwendet werden. Aber jetzt scheint alles in Ordnung zu sein und zu arbeiten. ;) Es dauerte eine Weile. Prost r.

Answer 1

Sowohl die % Einheiten als auch die squish Mixin arbeiten gegen Sie. Susy legt standardmäßig eine maximale Breite für Container in denselben Einheiten fest, in denen Sie das Raster definiert haben. In der Tat, das ist alles, wofür diese Einheiten verwendet werden. Wenn Sie möchten, dass Ihre maximale Breite in px liegt, definieren Sie Ihr Raster in px. Wenn Sie möchten, verwenden Sie emem. $container-width ist eine Überschreibung für den Standard, so dass es funktioniert haben sollte. Ich müsste deinen tatsächlichen Code sehen, wenn du das versucht hast, um zu wissen, was schief gelaufen ist.

Ich empfehle ihn nur:

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

.sectionwrap{ 
    @include container; 
} 

Alles andere ist wirklich nur Dinge overcomplicating.