2014-12-21 7 views
5

To jest coś, co nigdy nie rozumiałem w Susy 2.

Patrząc na tym prostym przykładzie:

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

że dodanie global-box-zaklejania: niczego border-box, na mapie $ Susy nie zmienia w ogóle, niezależnie od tego czy @include border-box użyć -sizing; w twoim kodzie, czy nie.

Ustawienie $ susy globalnego rozmiaru pudełka wydaje mi się całkowicie bezużyteczne. Czy mogę coś przeoczyć?

Dzięki

Odpowiedz

5

Zgadza się. global-box-sizing jest w rzeczywistości opisowym, a nie nakazowym. Mówi Susy, jak ustawiłeś globalną skrzynkę. Domyślnie jest on ustawiony na content-box (domyślną przeglądarkę, a border-box-sizing mixin ustawia jej border-box automatycznie. Tylko raz kiedykolwiek trzeba ręcznie zmienić ustawienie jest jeśli ustawisz pole globalny wielkości ręcznie.

Susy musi wiedzieć, jakiego modelu pudełkowego używasz, ponieważ zmienia matematykę dla pewnych typów i funkcjonalności siatki - w dowolnym miejscu mogą być stosowane dopełnienia i szerokości, takie jak inside/inside-static rynny lub bleed. Możesz nie mieć żadnej z tych sytuacji w swoim kodzie, w takim przypadku ustawienie to nie ma znaczenia:

+0

Dziękuję za odpowiedź Ale moim zdaniem, tak jak w powyższym przykładzie, jeśli nie używasz ramki-ramki-s w całym wymiarze, zmieniając jedynie globalne globalne ustawienie globalnego rozmiaru skrzyni na obramowanie, ustawienie nie ma nic wspólnego. To znaczy, że jeśli zmiana rozmiaru globalnej skrzynki w mapie $ susy niczego nie zmienia, to dlaczego? – HomTom

+0

Zobacz zaktualizowane wyjaśnienie ... –

+0

Dzięki za wyjaśnienie. To doprowadzało mnie do szału przez kilka dni :) – Ketan

Powiązane problemy