nasıl sadece dolgu/marj daha büyük görünüm üzerinde büyümeye devam ediyor Susy bir maksimum konteyner-genişliğini ayarlamak için?

Question

En büyük masaüstü görünümü/kesme noktasında, Susy demo sayfasında (http://susy.oddbird.net/demos/magic/) olduğu gibi aynı davranışı gerçekleştirmeyi denedim - kapsayıcının maksimum genişliğine erişildiğinde, kapta kalırken yalnızca her iki taraftaki dolgu veya kenar boşluğu büyüyor maksimum genişlik.

Ama hala tercih birimine ve ne tarif doldurma/marj davranışı gerçekleştirmek için en iyi fonksiyon gibi bir iki hususu biraz karıştı. Şu anda

Benim genel Susy ayarlar aşağıdaki gibidir:

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

spesifik SCSS parçası öyle görünüyor. Ben bir kabı dahil ve squish üzerinden bir farkla ile çevrili ettik:

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

Ama sorun konteyner ve ezilmiş alanlar hem büyümek ve büyümek ve orantılı büyümek olmasıdır. Muhtemelen bir kusur, kullanılan birimlerin yüzdeli olmasıdır? Bunun yerine em veya rem kullanmak daha mantıklı olur mu? ((Kolon-genişlik + oluk genişliği) * sütun sayısı) otomatik olarak sadece ezilmiş alanlar teorik olarak büyümeye devam toplanır ve maksimum genişlik ulaşıldığında

araçlar? Ama denedim ve başarısız oldu.

Ben de ayarlamak çalıştı: Ayrıca

$container-width: 1000px; 

Ama şans yok. Herhangi bir ipucu takdir edilir. Saygılarımızla Ralf

Güncelleme: Mobil birinci Sitemi yeniden düzenlenmiş ve ben de ezmek() olayı saptırmak biraz ilkti bütün Susy ızgara kavramı var düşündüm. : Ama bir şekilde sanırım bir daha yanlış bir şeyler yapıyorum.

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

yerine $ largerviewport olanlar için başlangıç ​​değerlerine $ fivehundred kesme geçen ve hala ötesinde şekilde kap genişliği yapışır. Her nasılsa ben bu benim sarıcı sınıfında kabı değiştirmeye yanlış bir yol olduğunu korku? Benim tarafımda akıl yürütmede bir başka hata mı? Saygılarımızla, Ralf

Güncelleme 2: Tamam, bu gerçekten tuhaf. ben şu anda aşağıdaki Sass kodunu denedim:

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

Ve gibi görünür döndürüldü CSS aşağıdaki:

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

nasılsa bütün ile-grid-ayar dışarı bırakılmış?

Güncelleme 3: Tamam, anladım. Şebeke içi ayarlarını yaptıktan sonra kabın genişliğini ayarlamanın gerekli olduğunu fark etmediniz. Ben sadece oluk değiştirdi başka bir örnekte gerekli değildi. Ama işte öyle görünüyor.

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

Güncelleme benzer bir sorun haline çalışabilir diğerleri için 4 Tamam, bu yararlı olabilir. Sadece grid-settings işlevinde ayarlanmış değerlerimin neden dikkate alınmadığını merak ettim - özellikle de doldurma değeri. Daha sonra set konteyner genişliğinin sadece maksimum genişlik değerini ayarladığını anladım. Ancak girilen tüm değerleri ızgaraya uygulamak için konteyner karışımını tekrar eklemelisiniz. Ama şimdi her şey iyi görünüyor ve çalışıyor. ;) Biraz zaman aldı. Şerefe r.

Answer 1

% birimleri Hem ve squish mixin size karşı çalışıyor. Susy, varsayılan olarak, ızgarayı tanımlamak için kullandığınız aynı birimlerde kapsayıcılarda maksimum genişlik ayarlar. Aslında, tüm bu birimler için kullanılır. Maksimum genişliğinizin px içinde olmasını istiyorsanız, ızgaranızı px içinde tanımlayın. em öğesini em kullanın. $container-width varsayılan için bir geçersiz kılmadır, bu yüzden çalışmış olması gerekir. Neyin yanlış olduğunu bilmek için denediğinizde gerçek kodunuzu görmeliyim.

Sadece bu tavsiye: Başka

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

.sectionwrap{ 
    @include container; 
} 

şey gerçekten sadece şeyler overcomplicating edilir.