$ Susy setting global window size doesn’t change anything in Susy2

Question

This is something that I never understood in Susy 2.

This simple example shows:

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

that adding global-box-sizing: border-box to the $ susy map doesn’t change anything, regardless of whether you use @include border-box-size; in your code or not.

The value of $ susy, setting the global size scale, seems completely useless to me. Or am I not noticing anything?

thanks

Answer 1

It is right. global-box-sizing is actually descriptive, not prescriptive. He tells Susie how you set up your global border box. By default, it is set to content-box (the browser is the default, and the border-box-sizing mix will automatically set it to border-box . The only time you need to change the setting manually is to set the global size of the window manually.

Susie needs to know which box model you use, because it changes the math for certain types and functionality of the grid - everywhere there can be deadlocks and widths, for example, inside / inside-static gutters or bleed . You may not have any of these situations in your code, in which case this value does not matter.