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

$susy マップにglobal-box-sizing: border-boxを追加しても、 @include border-box-sizing; を使用するかどうかに関係なく、何も変更されません。あなたのコードであるかどうか。

$susy 設定の global-box-sizing は、私にはまったく役に立たないようです。それとも私は何かを見落としていますか?

ありがとう

4

1 に答える 1