Gutters susy not created

110 Views Asked by At

Recently we created a new project using Sass and Compass. I tried to use the basic setup:

$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,
 )
);    

We import Susy on every page but we are not able to see the gutters.

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

We expected the margin would be auto calculated, but if we look in the output Margin-right and Margin-left are not created.

Output:

  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;

What are we missing here?

0

There are 0 best solutions below