0

最近、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;

ここで何が欠けていますか?

4

0 に答える 0