Die $ susy global-box-Sizing Einstellung tut alles in Susy2

Question

Das ist etwas ändern, die ich nie in Susy verstanden 2.

bei diesem einfachen Beispiel der Suche zeigt:

http://codepen.io/itsthomas/pen/Btzxa

HTML:

<div id="wrapper"> 
    <div id="content"> 
    <div class="box1">Box1</div> 
    <div class="box1">Box1</div> 
    <div class="box1">Box1</div> 
    </div> 
    <aside> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p> 
    </aside> 
</div> 

SASS:

@import 'susy'; 
@include border-box-sizing; 

$susy: (
    container: 90%, 
    columns: 24, 
    gutters: 1/3, 
    /* global-box-sizing: border-box, */ 
    debug: (
    image: show, 
    output: overlay, 
), 
); 

#wrapper { 
    @include container; 
} 

#content { 
    @include span(18 first); 
    background-color: red; 
    height: 100px; 
    padding: gutter(); 
} 

aside { 
    @include span(6 last); 
    background-color: #F0A754; 
    padding: gutter(); 
} 

.box1 { 
    @include span(6 of 18); 
    height: 40px; 
    background-color: #6D4214; 
    &:last-child { 
    /* margin-right: 0; */ 
    @include last; 
    } 
} 

, dass das Hinzufügen des global-Box-Sizing: border-box, zum $ susy Karte nicht überhaupt nichts ändern, unabhängig davon, ob Sie @include border-Box verwenden -Size; in deinem Code oder nicht.

Die $ susy Einstellung Global-Box-Sizing scheint mir völlig nutzlos. Oder übersehe ich irgendetwas?

Danke

Answer 1

Das stimmt. global-box-sizing ist eigentlich deskriptiv, nicht vorschreibend. Es erzählt Susy, wie Sie Ihre globale Grenze festgelegt haben. Standardmäßig wird es auf content-box (der Standard-Browser eingestellt und der border-box-sizing mixin wird es border-box für Sie automatisch eingestellt. Die einzige Zeit, die Sie jemals brauchen die Einstellung manuell zu ändern, wenn Sie das globale Feld Sizing manuell einstellen.

Susy muss wissen, welches Box-Modell Sie verwenden, da es die Mathematik für bestimmte Grid-Typen und -Funktionen ändert - überall wo Padding und Breite interagieren, wie inside/inside-static Rinnen oder bleed. Möglicherweise haben Sie keine dieser Situationen in Ihrem Code, In diesem Fall ist diese Einstellung egal