Search code examples
csssasscss-floatcompass-sasssusy-compass

Why is Susy giving my columns a 44.44444% width instead of 50%?


Cannot figure out why my columns are not 50% when no-gutters is included in the parameters?

SCSS:

$susy: (
  global-box-sizing: border-box,
  gutters: 1/4,
  gutter-position: before
);

.columns {
  @include clearfix;
}

.column {   
  .twoColumns & {
    @include span (1 of 2 no-gutters);
  }
}

CSS:

.columns:after {
  content: "";
  display: table;
  clear: both;
}

.twoColumns .column {
  width: 44.44444%;
  float: left;
}

Solution

  • You have to set gutter-position with inside value to get 50% of columns:

    $susy: (
      global-box-sizing: border-box,
      gutters: 1/4,
      gutter-position: inside
    );
    
    .columns {
      @include clearfix;
    }
    
    .column {   
      .twoColumns & {
        @include span (1 of 2 no-gutters);
      }
    }