Susy: Überschreiben blende() am Haltepunkt

Question

Wie mache ich die Bleed-X() Mixin an einem kleineren Haltepunkt so Box4 (die gelbe Box) in Beispiel 2 geht zurück zwischen den lila Spalten und nicht zu den nächste Zeile.

.story4 { 
    @include bleed-x(); 
    @include span(2); 
    background: yellow; 
    height: 80px; 
    @include breakpoint($small) { 
    @include span(8 last); 
    } 
} 

Codepen: http://codepen.io/meijioro/pen/aBdWyO

Answer 1

Bleed ist eine Kombination von negativen und positiven Margen Polsterung. Zurücksetzen sowohl 0 außer Kraft zu setzen:

@include breakpoint($small) { 
    @include span(8 last); 
    margin: 0; 
    padding: 0; 
} 

Im Allgemeinen versuche ich, durch eine Begrenzung der ursprüngliche Anwendung Unterbrechungsüberschreibungen zu vermeiden. Etwas mehr wie das:

.story4 { 
    @include span(2); 
    background: yellow; 
    height: 80px; 

    // use your own tools to create max-width breakpoints... 
    // this limits the bleed, so we don't have to override it later. 
    @media (max-width: $small) { 
    @include bleed-x(); 
    } 

    @include breakpoint($small) { 
    @include span(8 last); 
    } 
}