5

这是我在 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 地图根本不会改变任何东西，无论您是否使用 @include border-box-sizing; 在你的代码中与否。

$susy 设置 global-box-sizing 对我来说似乎完全没用。还是我忽略了什么？

谢谢

4

1 回答 1

5

这是正确的。global-box-sizing实际上是描述性的，而不是规定性的。它告诉 Susy 你是如何设置全局边界框的。默认情况下，它设置为content-box（浏览器默认设置，border-box-sizingmixin 会border-box自动为您设置。唯一需要手动更改设置的情况是手动设置全局框大小。

Susy 需要知道您使用的是什么盒子模型，因为它会更改某些网格类型和功能的数学运算——任何填充和宽度可能相互作用的地方，例如inside/ inside-staticgutters 或bleed. 您的代码中可能没有任何这些情况，在这种情况下，该设置无关紧要。

于 2014-12-23T07:13:26.963 回答