これは、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 は、私にはまったく役に立たないようです。それとも私は何かを見落としていますか?
ありがとう