最近、Sass と Compass を使用して新しいプロジェクトを作成しました。基本的なセットアップを使用しようとしました:
$total-columns : 12;
$header-columns : 36;
$column-width : 5em;
$gutter-width : 1em;
$susy: (
/*the basics*/
flow: ltr,
math: fluid,
output: float,
gutter-position: after,
container: auto,
container-position: center,
columns: $total-columns,
gutters: $gutter-width / $column-width,
column-width: $column-width,
last-flow: to,
debug: (
image: show,
color: blue,
output: overlay,
toggle: top right,
),
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: false,
rem: true,
)
);
すべてのページに Susy をインポートしますが、ガターは表示されません。
div.block{
@include span(4 of 12);
position: relative;
box-sizing: border-box;
background-color: rgba(255,255,255,0.9);
border: 6px double rgba(0,0,0,0.3);
min-height: 18em;
text-align: center;
margin-bottom: 1em;
padding:0;
border-radius: 10px;
overflow: hidden;
}
マージンは自動計算されると予想していましたが、出力を確認すると、Margin-right と Margin-left が作成されていません。
出力:
width: 33.33333%;
float: left;
position: relative;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.9);
border: 6px double rgba(0, 0, 0, 0.3);
min-height: 18em;
text-align: center;
margin-bottom: 1em;
padding: 0;
border-radius: 10px;
overflow: hidden;
ここで何が欠けていますか?