$ susy设置全局框大小不会改变Susy2中的任何内容

Question

这是我在Susy 2中从未理解过的东西.

看一下这个简单的例子就说明:

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>

上海社会科学院:

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

将global-box-sizing:border-box添加到$ susy map不会改变任何内容,无论你是否使用@include border-box-sizing; 在您的代码中或不.

$ susy设置全局框大小对我来说似乎完全没用.还是我忽略了什么？

谢谢

Answer 1

那就对了.global-box-sizing实际上是描述性的,而不是规定性的.它告诉Susy你如何设置全局边框.默认情况下,它设置为content-box(浏览器默认设置,border-box-sizingmixin将border-box自动将其设置为您.手动更改设置的唯一时间是手动设置全局框大小调整.

Susy需要知道你正在使用什么样的盒子模型,因为它改变了某些网格类型和功能的数学 - 任何填充和宽度可能会相互影响,比如inside/ inside-staticgutters或bleed.您的代码中可能没有任何这些情况,在这种情况下,该设置无关紧要.